{% load static %}

{% block extra_css %}
<style>


  .custom-outline {
    -webkit-text-stroke: 0.2px rgb(0, 0, 0);
  }
</style>
{% endblock %}

{% block head %}
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <button id="filterButton" class="dark:text-white dark:hover:bg-[#2a2f3a]  p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
        </svg>
        <span>Filter</span>
    </button>
    <div class="flex gap-2">
        <a href="{% url link %}" class="dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Zurücksetzen
        </a>
        <a href="{% url 'library:new_quiz' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Neues Quiz
        </a>
    </div>
</div>

<div id="filterPanel" class="container mx-auto px-4 {% if request.GET.filter == '1' %}block{% else %}hidden{% endif %}">
    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 dark:bg-transparent dark:text-white ">
      <form action="{% url link %}" method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
         <input type="hidden" name="filter" id="filter-input"> 
        <div class="space-y-2">
            <div class="flex gap-2">
            <input type="checkbox" name="use_min_amount_questions" id="use_min_amount_questions" {% if form.use_min_amount_questions.value %}checked{% endif %}>
            <label class="block text-sm font-medium text-gray-700 dark:text-white">minimale Anzahl an Fragen</label>
            </div>
            <input 
      type="range" 
      name="min_amount_questions" 
      id="id_min_amount_questions"
      min="0" 
      max="100" 
      step="1"
      value="{{ form.min_amount_questions.value|default_if_none:0 }}" 
      class="w-full accent-blue-600 dark:text-white"
      oninput="document.getElementById('min_amount_value').textContent = this.value + ' Frage(n)'"
    {% if not form.use_min_amount_questions.value %}disabled{% endif %}
    >

    <span id="min_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
      {{ form.min_amount_questions.value|default_if_none:0 }} Frage(n)
    </span>
    <br>
    <span class="text-xs text-gray-600 dark:text-white"> Quizze anderer User werden erst ab min. 1 Frage angezeigt.</span>
    </div>

        <div class="space-y-2">
            <div class="flex gap-2">
            <input type="checkbox" name="use_max_amount_questions" id="use_max_amount_questions" {% if form.use_max_amount_questions.value %}checked{% endif %}>
            <label class="block text-sm font-medium text-gray-700 dark:text-white">maximale Anzahl an Fragen</label>
            </div>
       <input 
      type="range" 
      name="max_amount_questions" 
      id="id_max_amount_questions"
      min="1" 
      max="100" 
      step="1"
      value="{{ form.max_amount_questions.value|default_if_none:100 }}" 
      class="w-full accent-blue-600"
      oninput="document.getElementById('max_amount_value').textContent = this.value+' Frage(n)'"
       {% if not form.use_max_amount_questions.value %}disabled{% endif %}
    >

 <span id="max_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
      {{ form.max_amount_questions.value|default_if_none:100 }} Frage(n)
    </span>
</div>

                <div class="space-y-2">
            <label class="block text-sm font-medium text-gray-700 dark:text-white">veröffentlicht von User</label>
            <input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full dark:text-white" id="id_user" value="{{ form.user.value|default_if_none:'' }}">
        </div>
       <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-white">Kategorie</label>
        {{ form.categories }}

    </div> 
       <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-white">Suche</label>
             {{ form.search }}

    </div> 
 

        <div class="md:col-span-3 flex justify-end">
            <button
             type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                </svg>
                Filtern
            </button>
        </div>
    </form>    
    </div>
</div>
</form>
<script>

document.addEventListener('DOMContentLoaded', () => {

   
  const checkbox = document.getElementById('use_min_amount_questions');
  const slider = document.getElementById('id_min_amount_questions');

  const checkbox_max = document.getElementById('use_max_amount_questions');
  const slider_max = document.getElementById('id_max_amount_questions');

  checkbox.addEventListener('change', () => {
    slider.disabled = !checkbox.checked;
  });

    checkbox_max.addEventListener('change', () => {
    slider_max.disabled = !checkbox_max.checked;
  });

});




</script>
{% endblock %}