<section data-section-title="{{ section_title }}" class="{{'bg-light' if section_index % 2 == 0 }}" id="plt">
  <div class="container">

    <div class="d-flex justify-content-between align-items-center">
      <h2>{{ section_title }}</h2>
      {%- if features | length -%}
      <div class="dropdown feature-select">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Feature: {{ features[0].name }}
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu">
          {%- for feature in features -%}
            <button class="dropdown-item" type="button" data-feature="{{ feature.name }}">{{ feature.name }}</button>
          {%- endfor -%}
        </div>
      </div>
      {%- endif -%}
    </div>
    <hr>
    {%- if section_description|length -%}
      <div class="section-description">{{section_description}}</div><hr>
    {%- endif -%}
    {%- if features | length -%}
      {%- for feature in features -%}
        <script> 
          {%- set curr = loop.index  -%}
        {%- for plot_type, layout in feature.plot_type_layouts.items() -%}
            layouts["{{ section_index }}{{ curr }}-{{ plot_type }}"] = {{ layout | json_plot }};
        {%- endfor -%}
        </script>
        <div class="section_feature" data-section-feature="{{ feature.name }}">
          {%- if feature.plots is mapping -%}
            {%- for ref, plots in feature.plots.items() -%}
              <h3> {{ feature.titles.get(ref, ref) }} </h3>
              <div class="section-description">{{ feature.descriptions[ref] }}</div>
              <div class="row">
              {%- for metric in plots -%}
                {%- with metric=metric -%}
                  {%- include 'card.html' -%}
                {%- endwith -%}
              {%- endfor -%}
              </div>
            {%- endfor -%}
          {%- else -%}
            <div class="row">
            {%- for metric in feature.plots -%}
              {%- with metric=metric -%}
                {%- include 'card.html' -%}
              {%- endwith -%}
            {%- endfor -%}
            </div>
          {%- endif-%}
        </div>
      {%- endfor -%}
    {%- else -%}
        <div class="row" >
            {%- for metric in plots -%}
              {%- with metric=metric -%}
                {%- include 'card.html' -%}
              {%- endwith -%}
            {%- endfor -%}
        </div>
    {%- endif -%}
  </div>
</section>