<%- include("partials/page-header", {
  user,
  title: t.reportview.title,
  subtitle: "",
  showUserName: true
}) %>

<div class="container mt-4">
  <%- include("partials/flash") %>
  <h4><%= t.reportview.title %></h4>

  <form method="GET" action="/reports"
    style="margin-bottom:25px; display:flex; gap:15px; align-items:end;">

    <div>
      <label><%= t.reportview.year %></label>
      <select name="year" class="form-select" id="reportYear">
        <% years.forEach(y => { %>
          <option value="<%= y %>" <%= y == selectedYear ? "selected" : "" %>><%= y %></option>
        <% }) %>
      </select>
    </div>

    <div>
      <label><%= t.reportview.quarter %></label>
      <select name="quarter" class="form-select" id="reportQuarter">
        <option value="0">Alle</option>
        <option value="1" <%= selectedQuarter == 1 ? "selected" : "" %>>Q1</option>
        <option value="2" <%= selectedQuarter == 2 ? "selected" : "" %>>Q2</option>
        <option value="3" <%= selectedQuarter == 3 ? "selected" : "" %>>Q3</option>
        <option value="4" <%= selectedQuarter == 4 ? "selected" : "" %>>Q4</option>
      </select>
    </div>

  </form>

  <div style="max-width: 400px; margin: auto">
    <canvas id="statusChart"></canvas>
    <div id="custom-legend" class="chart-legend"></div>
  </div>

  <script id="stats-data" type="application/json">
    <%- JSON.stringify(stats) %>
  </script>

  <script src="/js/chart.js"></script>
  <script src="/js/reports.js"></script>
  <script src="/js/reportview-select.js" defer></script>
</div>
