BathHacked/energy-sparks

<div class="accordian mb-2 mt-2" id="templateVariablesCard">
  <% template_variables.each_with_index do |(heading, variables), index| %>
    <div class="card">
      <div class="card-header" id="templateVariablesHeader<%=index%>">
        <h2 class="mb-0 pt-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#templateVariables<%=index%>" aria-expanded="true" aria-controls="templateVariables<%= index %>">
            <%= heading %> variables
          </button>
        </h2>
      </div>

      <div id="templateVariables<%=index%>" class="collapse" aria-labelledby="templateVariablesHeader<%=index %>" data-parent="#templateVariablesCard">
        <table class="table">
          <thead>
            <tr>
              <th>Variable</th>
              <th>Description</th>
              <th>Units</th>
              <% if example_variables %>
                <th>Example</th>
              <% end %>
            </tr>
          </thead>
          <% variables.each do |key, details| %>
            <tr>
              <td>{{<%= key %>}}</td>
              <td><%= details[:description] %></td>
              <td>
                <% if details[units_field].is_a?(Hash) %>
                  <% details[units_field].each do |key, value| %>
                    <%= key %> (<%= value %>)
                  <% end %>
                <% else %>
                  <%= details[units_field] %>
                <% end %>
              </td>
              <% if example_variables %>
                <td><%= example_variables[key] %></td>
              <% end %>
            </tr>
          <% end %>
        </table>
      </div>
    </div>

  <% end %>
</div>