{% 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-[100px] container mx-auto max-w-screen-md">

  <div class="mt-4 py-10 px-6 border-petrol-500 border-[0.5px] shadow-[0_35px_60px_-15px_rgba(0,0,0,0.7)]">

    <div class="grid grid-cols-2">
      <div>
        <div class="flex">
          <div class="bg-petrol-500 border-2 border-petrol-500">
            <img class="object-contains h-28" src="/favicon.ico" alt="">
          </div>
        </div>
        <div class="text-xs">
          Immobilienmngt Beratung und IT<br>
          Tobias Gerwin<br>
          Oberbilker Allee 109<br>
          40227 Düsseldorf<br>
          Steuernummer: 133/5096/3252<br>
        </div>
      </div>

      <div>
        <div class="flex justify-end">
          <a href="{{ participant_link }}" target="_blank">
            <img class="object-contains h-28" src="{{ participant_logo }}" alt="Logo des Unternehmens: {{ participant }}">
          </a>
        </div>
        <div class="text-xs text-right">
          {{ participant_head }}
        </div>
      </div>

    </div>

    <h1 class="referenz border-y-2 border-petrol-500">
      {{ title }}
    </h1>
    
    <h2 class="referenz">Key-Facts</h2>

    <div class="grid gap-2 grid-cols-[120px_1fr_62px_60px] text-sm">
      <div class="font-bold">Projektzeitraum:</div>
      <div>{{ time }}</div>
      <div class="font-bold">Aufwand:</div>
      <div class="text-right">{{ effort }}</div>

      <div class="font-bold">Leistungen:</div>
      <div class="col-span-3 flex flex-wrap">
        {% for tag in tags %}
        <div class="px-2 py-0.5 mr-1 mb-1 rounded-lg bg-petrol-500 text-white text-sm">
          {{ tag }}
        </div>
        {% endfor %}
      </div>

      <div class="font-bold">Funktionen:</div>
      <div class="col-span-3">
        {% for function in functions %}
        <div class="grid grid-cols-[12px_1fr] items-start gap-4">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            class="mt-1 w-3 h-3 text-petrol-500">
            <rect x="1" y="1" width="22" height="22" />
            <path d="M 22.026296,2.1250279 C 9.8847251,11.19086 14.722256,30.081726 7.5560565,11.274574" fill="none"
              stroke-linecap="round" stroke-width="2" />
          </svg>
          <div>{{ function }}</div>
        </div>
        {% endfor %}
      </div>

      <div class="font-bold">Stack:</div>
      <div class="col-span-3 flex flex-wrap">
        {% for stack in stack_list %}
        <div class="px-2 py-0.5 mr-1 mb-1 rounded-lg bg-black text-lime-500 text-sm">
          {{ stack }}
        </div>
        {% endfor %}
      </div>

      <div class="font-bold">Link:</div>
      <div class="col-span-3">
        <a href="{{ link.href }}" target="_blank"><span class="underline">{{ link.href }}</span> ({{ link.label }})</a>
      </div>

    </div>


    <h2 class="referenz">Case-Study</h2>
    {{ case_study }}

    {% if quote %}
    <h2 class="referenz">Kundenzitat</h2>
    <p class="referenz italic font-sans text-center ml-10 p-6 bg-gray-100 text-gray-600 border-l-4 border-gray-600">
      "{{ quote }}"<br>
      <span class="font-bold">- {{ quote_author }} -</span>
    </p>
    {% endif %}
     
  </div>
</main>

{% endblock %}