{# templates/songs_dashboard.html #}
{% extends 'base.html' %}

{# page title #}
{% block title %}Edit Folder Config{% endblock %}

{# override navbar text: #}
{% block nav_brand %}Dashboard - Analyse Wiederholungen{% endblock %}

{# page content #}
{% block content %}

    <!-- Main Container -->
    <div class="container-fluid px-4">
      <!-- Dropdown Controls -->
      <div class="mb-4 d-flex flex-wrap gap-2">

        <!-- Site Dropdown -->
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" 
                  type="button" id="siteDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            {% if session['songs_dashboard_site'] == 'Speyer' %}
              Speyer
            {% elif session['songs_dashboard_site'] == 'Schwegenheim' %}
              Schwegenheim
            {% else %}
              Select Site
            {% endif %}
          </button>
          <ul class="dropdown-menu" aria-labelledby="siteDropdown">
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_site'] == 'Speyer' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', site='Speyer') }}">
                Speyer
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_site'] == 'Schwegenheim' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', site='Schwegenheim') }}">
                Schwegenheim
              </a>
            </li>
          </ul>
        </div>
        
        <!-- Timeframe Dropdown -->
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" 
                  type="button" id="timeframeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            {% if session['songs_dashboard_timeframe'] == '7' %}
              Last 7 Days
            {% elif session['songs_dashboard_timeframe'] == '30' %}
              Last 30 Days
            {% elif session['songs_dashboard_timeframe'] == '90' %}
              Last 90 Days
            {% elif session['songs_dashboard_timeframe'] == '365' %}
              Last 365 Days
            {% elif session['songs_dashboard_timeframe'] == 'all' %}
              All Data
            {% else %}
              Select Timeframe
            {% endif %}
          </button>
          <ul class="dropdown-menu" aria-labelledby="timeframeDropdown">
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_timeframe'] == '7' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', timeframe='7') }}">
                Last 7 Days
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_timeframe'] == '30' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', timeframe='30') }}">
                Last 30 Days
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_timeframe'] == '90' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', timeframe='90') }}">
                Last 90 Days
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_timeframe'] == '365' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', timeframe='365') }}">
                Last 365 Days
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_timeframe'] == 'all' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', timeframe='all') }}">
                All Data
              </a>
            </li>
          </ul>
        </div>

        <!-- category Dropdown -->
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="categoryDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            {% if session['songs_dashboard_category'] == 'Gemeinsamer Gesang' %}
            Gemeinsamer Gesang
            {% elif session['songs_dashboard_category'] == 'Chor' %}
            Chor
            {% elif session['songs_dashboard_category'] == 'Gruppenlied' %}
            Gruppenlied
            {% else %}
            Select Category
            {% endif %}
          </button>
          <ul class="dropdown-menu" aria-labelledby="categoryDropdown">
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_category'] == 'Gemeinsamer Gesang' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', category='Gemeinsamer Gesang') }}">
                Gemeinsamer Gesang
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_category'] == 'Chor' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', category='Chor') }}">
                Chor
              </a>
            </li>
            <li>
              <a class="dropdown-item {% if session['songs_dashboard_category'] == 'Gruppenlied' %}active{% endif %}" 
                href="{{ url_for('songs_dashboard', category='Gruppenlied') }}">
                Gruppenlied
              </a>
            </li>
          </ul>
        </div>
      </div> 
  
    <!-- Table Output -->
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Anzahl</th>
          <th>Titel</th>
        </tr>
      </thead>
      <tbody>
        {% for count, titel in performance_data %}
          <tr>
            <td>{{ count }}</td>
            <td>{{ titel }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
{% endblock %}