{{ 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">
              <div class="flex items-start space-x-4 justify-between">
              <div>
              {% load access markdown %}
              {% for key, value in report.content.items %}
                <div class="justify-between items-start">
                  <h4 class="text-sm font-medium text-gray-600">{{ form.display_names|access:key|safe }}</h4>
                  <div class="text-sm text-gray-800 mb-4">{{ value|markdown|safe }}</div>
                </div>
              {% endfor %}
              </div>

              {% if report.image is not None %}
              {% load b64 %}
              <div class="w-36">
              <img src="data:image/*;base64,{{ report.image|b64 }}" width="128" 
      class="-mt-8 w-32 h-32 border-2 border-black cursor-pointer rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300">
              </div>        
      {% endif %}

              </div>
            </dl>
          </div>
        </main>