{% extends 'base.html' %}

{% block content %}
<div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
    <div class="text-center">
        <h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip</h2>
        <h3 class="mt-4 italic font-light sm:text-4xl text-md bg-gradient-to-r from-pink-500 via-purple-600 to-blue-700 bg-clip-text text-transparent">weil Lernen auch Spaß <br> machen kann!</h3>
    </div>
    <div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md dark:bg-gray-900 dark:border-0">
        <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
        <a class="qp-a-button bg-indigo-500 text-white" href="{% url 'library:overview_quiz' %}">Moderieren</a>
        <a class="qp-a-button bg-purple-500 text-white" href="{% url 'library:new_quiz' %}">Erstellen</a>
    </div>
</div>
{% endblock %}

{% block faqs %}
<style>
   details[open] summary svg {
    transform: rotate(180deg);
  }

</style>

{% if descriptions %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
  <div class="flex items-center gap-3">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Was kann qivip?</h2>
    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
  </div>
</div>

<div class="container mx-auto px-4 sm:px-6 lg:px-8 mb-16">

<div class="max-w-full p-4 mt-8 rounded-2xl bg-gray-100 dark:bg-transparent  shadow-sm">
    <p class="text-lg font-bold text-gray-800 dark:text-white dark:bg-transparent mb-3">
      Mit qivip kann man:
    </p>

    <div class="space-y-2 text-gray-700 dark:text-white ">
    {% for description in descriptions %}
        <p>       
       <li class="ml-4"><span class="font-bold">{{ description.title }}</span>&nbsp;{{ description.description }}</li> 
        </p>
        {% endfor %}
    </div>
</div>
</div>

{% endif %}



{% if faqs %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
  <div class="flex items-center gap-3">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">FAQs</h2>
    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
  </div>
</div>


    <div class="input-group !max-w-4xl tracking-wide dark:!bg-gray-900 dark:!text-white">
        <h1 class="font-black text-blue-600 flex justify-between gap-2 lg:text-lg">


        FAQs - häufig gestellte Fragen
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
</svg></h1>
   
</div>

{% for faq in faqs %}
<div class="input-group mt-2.5  !max-w-4xl hover:bg-gray-50 dark:!bg-gray-900 dark:!text-white ">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">{{ faq.question }}
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">{{ faq.answer }}</p>
        </details>
</div>
{% endfor %}
{% endif %}
{% endblock %}