{{ title|safe }}

      {% if late_reports > 1 %}
      
      <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mr-10 ml-10 mt-6" role="alert">
        <p class="font-bold"> Du bist nicht aktuell! </p>
        <p> Du hast noch {{ late_reports }} Berichtshefte nachzuschreiben. </p>
      </div>
      
      {% endif %}

      {% if reports|length == 0 %}

      <h3 class="text-xl justify-center flex m-10 p-5">wau, such empty!</h3>

      <button onclick="location = '/write'" class="{{ style.red_btn }} justify-center">
        Füge dein erstes Berichtsheft hinzu!
      </button>
      {% else %}

      <div
        class="mb-5 -mt-5 flex items-center justify-center grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
      >
        {% for report in reports %}

        {% if forloop.first %} {% if report.week != week_now %}
        <button class="{{ style.card }} flex items-center justify-center" title="Neues Berichtsheft"
        hx-get="/write" hx-target="#main_content" hx-push-url="true" hx-swap="innerHTML"
        >
          <span class="text-9xl font-bold"> + </span>
        </button>
        {% endif %} {% endif %}

        {% include 'component/report.html' with report=report %}

         {% endfor %} 

         <div hx-get="/reports?page=2"
  hx-trigger="revealed"
  hx-swap="outerHTML">
  
  {% endif %}

      </div>
    </div>