% if 'theme' in config and config['theme'] == 'gwdetchar':
<div class="container-fluid">
% else:
<div class="container-fluid" width="95%">
% end
% for c in content:
%     if c['name'] == 'header':
%         if 'theme' in config and config['theme'] == 'gwdetchar':
            <h1 class="mt-4">{{ c['header'] }}</h1><br />
%         else:
            <br /><h2>{{ c['header'] }}</h2><br />
%         end
%     elif c['name'] == 'footer':
%         if 'theme' in config and config['theme'] == 'gwdetchar':
          <h3 class="mt-4">{{ c['footer'] }}</h3><br />
%         else:
          <h6>{{ c['footer'] }}</h6><br />
%         end
%     elif c['name'] == 'description':
          <p>{{ c['description'] }}</p>
%     elif c['name'] == 'image':
          <div class="container">
          <div class="row">
              <div class="col-md-12">
                <div class="thumbnail">
                  <a href="{{ c['url'] }}" target="_blank"><img src="{{ c['url'] }}" style="width:95%" class="img-responsive" alt="" /></a>
                </div>
              </div>
              <br />
          </div>
          </div>
%     elif c['name'] == 'image_board':
          <div class="card border-light card-body scaffold shadow-sm">
%         for image_row in c['images']:
            <div class="row">
%           if len(image_row) == 1:
%               image = image_row[0]
                <div class="col-md-2"></div>
                <div class="col-md-8">
                <a href="{{ image['url'] }}" class="fancybox" rel="fancybox" target="_blank" data-fancybox="gallery" data-fancybox-group="images" title data-caption>
                <img class="img-fluid w-100" src="{{ image['url'] }}" />
                </a>
                </div>
                <div class="col-md-2"></div>
%           else:
%             col_size = 12 // len(image_row)
%             for image in image_row:
                <div class="col-md-{{ col_size }}">
                <a href="{{ image['url'] }}" class="fancybox" rel="fancybox" target="_blank" data-fancybox="gallery" data-fancybox-group="images" title data-caption>
                <img class="img-fluid w-100" src="{{ image['url'] }}" />
                </a>
                </div>
%             end
%           end
            </div>
%         end
          </div> 
          <br />
%     elif c['name'] == 'image_pagination':
%         div_suffix = c['title'].lower().replace(' ', '_').replace(':', '').replace('.', '')
          <div role="tablist">
            <b-card no-body class="mb-1">
              <b-card-header header-tag="header" class="p-1" role="tab">
                <b-button block href="#" class="text-left" variant="secondary" v-b-toggle.accordion-{{ div_suffix }}>{{ c['title'] }}</b-button>
              </b-card-header>
%             if c['visible']:
              <b-collapse id="accordion-{{ div_suffix }}" visible accordion="{{ div_suffix }}-accordion" role="tabpanel" variant="secondary">
%             else:
              <b-collapse id="accordion-{{ div_suffix }}" accordion="{{ div_suffix }}-accordion" role="tabpanel" variant="secondary">
%             end
                <b-card-body>
                  <b-container fluid id="image-pagination-{{ div_suffix }}" class="bv-{{ div_suffix }}">
                    <b-row v-if="imagePagination['{{ div_suffix }}'].imageURLs.length !== 0" class="align-items-center py-3">
                      <b-col lg="2" class="text-center d-lg-block d-none">
                        <b-button @click="prevImage('{{ div_suffix }}')">&lt</b-button>
                      </b-col>
                      <b-col cols="12" lg="8" class="text-center">
                        <b-img thumbnail fluid :src="imagePagination['{{ div_suffix }}'].imageURLs[imagePagination['{{ div_suffix }}'].currentImage-1]"></b-img>
                        <b-form-select v-model="imagePagination['{{ div_suffix }}'].currentImage" :options="[...Array(imagePagination['{{ div_suffix }}'].imageURLs.length).keys()].map(x => x+1 )" size="sm" class="mt-3"></b-form-select>
                      </b-col>
                      <b-col lg="2" class="text-center d-lg-block d-none">
                        <b-button @click="nextImage('{{ div_suffix }}')">&gt</b-button>
                      </b-col>
                    </b-row>
                  </b-container>
                </b-card-body>
%               if 'footer' in c:
                  <b-card-footer><em>{{ c['footer'] }}</em></b-card-footer>
%               end
              </b-collapse>
            </b-card>
          </div>
          <br />
%     elif c['name'] == 'image_grid':
%         div_suffix = c['title'].lower().replace(' ', '_').replace(':', '').replace('.', '')
          <div role="tablist">
            <b-card no-body class="mb-1">
              <b-card-header header-tag="header" class="p-1" role="tab">
                <b-button block href="#" class="text-left" variant="secondary" v-b-toggle.accordion-{{ div_suffix }}>{{ c['title'] }}</b-button>
              </b-card-header>
%             if c['visible']:
              <b-collapse id="accordion-{{ div_suffix }}" visible accordion="{{ div_suffix }}-accordion" role="tabpanel" variant="secondary">
%             else:
              <b-collapse id="accordion-{{ div_suffix }}" accordion="{{ div_suffix }}-accordion" role="tabpanel" variant="secondary">
%             end
                <b-card-body>
                  <b-container fluid class="bv-{{ div_suffix }}">
%                   for i, image in enumerate(c['images']):
%                       col_size = 12 // c['grid_size']
%                       if i % c['grid_size'] == 0:
                          <b-row>
%                       end
                            <b-col cols="{{ col_size }}">
                              <b-link href="{{ image['url'] }}"><b-img thumbnail fluid src="{{ image['url'] }}" alt=""></b-img></b-link>
                            </b-col>
%                       if i % c['grid_size'] == c['grid_size'] - 1:
                          </b-row>
%                       end
%                   end
                  </b-container>
                </b-card-body>
%               if 'footer' in c:
                  <b-card-footer><em>{{ c['footer'] }}</em></b-card-footer>
%               end
              </b-collapse>
            </b-card>
          </div>
          <br />
%     elif c['name'] == 'table':
%         div_suffix = c['title'].lower().replace(' ', '_').replace(':', '').replace('.', '')
          <div role="tablist">
            <b-card no-body class="mb-1">
              <b-card-header header-tag="header" class="p-1" role="tab">
                <b-button block href="#" class="text-left" v-b-toggle.accordion-{{ div_suffix }}>{{ c['title'] }}</b-button>
              </b-card-header>
%             if c['visible']:
              <b-collapse id="accordion-{{ div_suffix }}" visible accordion="{{ div_suffix }}-accordion" role="tabpanel">
%             else:
              <b-collapse id="accordion-{{ div_suffix }}" accordion="{{ div_suffix }}-accordion" role="tabpanel">
%             end
                <b-card-body>
                  <b-container fluid class="bv-{{ div_suffix }}">
                    <div id="table_{{ div_suffix }}">
                      <div>
                        <b-table hover bordered show-empty responsive head-variant="light"
                        :items="items['{{ c['url'] }}']"
                        :fields="fields['{{ c['url'] }}']"
                        :current-page="currentPage['{{ c['url'] }}']"
                        :per-page="perPage"
                        >
                        </b-table>
                      </div>
                      <div>
                        <b-col md="6" class="my-1">
                          <b-pagination
                            :total-rows="totalRows['{{ c['url'] }}']"
                            :per-page="perPage"
                            v-model="currentPage['{{ c['url'] }}']"
                            class="my-0"
                          />
                        </b-col>
                      </div>
                    </div>
                  </b-container>
                </b-card-body>
%               if 'footer' in c:
                  <b-card-footer><em>{{ c['footer'] }}</em></b-card-footer>
%               end
              </b-collapse>
            </b-card>
          </div>
          <br />
%     elif c['name'] == 'flat_table':
          <table class="table table-sm table-hover">
            </br>
            <thead>
              <tr>
%             for column in c['columns']:
                <th scope="col">{{ column }}</th>
%             end
              </tr>
            </thead>
            <tbody>
%             for row in c['rows']:
                <tr>
%               for entry in row:
                  <td>{{ entry }}</td>
%               end
                </tr>
%             end
            </tbody>
          </table>
%     elif c['name'] == 'plot':
%         div_suffix = c['title'].lower().replace(' ', '_').replace(':','').replace('.', '')
          <div id="plot_{{ div_suffix }}"></div>
          <br />
%     end
% end
</div>