{% extends "templates/base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block container %}
  <ul class="nav nav-tabs mb-2" id="tabbar">
    <li class="nav-item">
      <a class="nav-link" aria-current="page" href="{{ url_for('themes') }}">{{ i18n('plugins.themes.themes.title') }}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" aria-current="page" href="{{ url_for('backgroundlayers') }}">{{ i18n('plugins.themes.backgroundlayers.title') }}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" aria-current="page" href="{{ url_for('mapthumbs') }}">{{ i18n('plugins.themes.mapthumbs.title') }}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" aria-current="page" href="{{ url_for('info_templates') }}">{{ i18n('plugins.themes.info_templates.title') }}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" aria-current="page" href="{{ url_for('files') }}">{{ i18n('plugins.themes.files.title') }}</a>
    </li>
  </ul>

  <div class="container pb-4">
    {% block themes_container %}
    {% endblock %}
  </div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script type="text/javascript">
    $('#tabbar a').each(function() {
        $(this).removeClass('active');
        if($(this).attr('href') === location.pathname) {
            $(this).addClass('active');
        }
    });
  </script>
{% endblock %}
