{{ title|safe }}

        <main class="flex-grow w-full max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg mt-6">
          <div class="mb-4">
            <p class="text-lg font-medium text-gray-700">
              Berichtsheft <span class="font-semibold">{{ report.year }}</span> / <span class="font-semibold">{{ report.week }}</span>
            </p>
            <p class="text-gray-700">
              Is Approved? 
              <span class="{% if report.is_approved %}text-green-500 font-semibold{% else %}text-red-500 font-semibold{% endif %}">
                {{ report.is_approved }}
              </span>
            </p>
          </div>
    
          <div class="border-t border-gray-200 mt-4 pt-4">
            <h2 class="text-lg font-medium text-gray-800 mb-2">Content:</h2>
            <dl class="space-y-2">
              {% load markdown %}
              {% for key, value in report.content.items %}
                <div class="justify-between items-start">
                  <h4 class="text-sm font-medium text-gray-600">{{ key }}</h4>
                  <span class="text-sm text-gray-800 mb-4">{{ value|markdown|safe }}</span>
                </div>
              {% endfor %}
            </dl>
          </div>
        </main>