{% extends "base.html" %}
{% load static %}

{% block extra_css %}
{% endblock %}

{% block body_class %}{% endblock %}

{% block content %}
  {% include "header.html" %}
  <main class="bg-white 2xl:px-1 px-0 space-y-1 relative top-[68px] min-h-[calc(100vh-88px)] pb-[80px] container mx-auto max-w-screen-md">

    <div class="py-10 grid gap-2">  
    {% for referenz in referenzList %}
      <a href="/projekt/{{ referenz.filename }}/" class="border-b-2 last:border-b-0">
      <div class="p-1 hover:bg-gray-200 grid grid-cols-[max(1fr)_1fr]">
        <h2 class="font-bold text-3xl mr-2">{{ referenz.title }}</h2>
        
        <div class="flex items-center flex-wrap">
          {% for tag in referenz.tags %}
          <div class="px-2 py-0.5 mr-2 mb-1 rounded-lg bg-petrol-500 text-white text-sm">
            {{ tag }}
          </div>
          {% endfor %}
        </div>
        <div class="col-span-2">
          <table class="text-left text-base text-gray-400">
            <tr>
              <th class="">Beschreibung:</th>
              <td>{{ referenz.short_description }}</td>
            </tr>
            <tr>
              <th class="">Auftraggeber:in:</th>
              <td>{{ referenz.participant }}</td>
            </tr>
            <tr>
              <th class="">Projektzeitraum:</th>
              <td>{{ referenz.time }}</td>
            </tr>
          </table>
        </div>
      </div></a>
    {% endfor %}
    </div>
      
    </main>
  {% endblock %}