{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="w-full h-[100vh] flex flex-col items-center ">
        <div class="w-[97%] p-5 mt-10 rounded-lg bg-white shadow-md">
            <form action="#" method="get">
                <!-- {% csrf_token %} -->
                <div class="relative flex justify-between">
                    <div class="relative w-[90%]">
                        <div class="absolute flex items-center ml-2 h-full">
                            <svg class="w-10 h-4 fill-current text-primary-gray-dark"
                                 viewBox="0 0 16 16"
                                 fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.8898 15.0493L11.8588 11.0182C11.7869 10.9463 11.6932 10.9088 11.5932 10.9088H11.2713C12.3431 9.74952 12.9994 8.20272 12.9994 6.49968C12.9994 2.90923 10.0901 0 6.49968 0C2.90923 0 0 2.90923 0 6.49968C0 10.0901 2.90923 12.9994 6.49968 12.9994C8.20272 12.9994 9.74952 12.3431 10.9088 11.2744V11.5932C10.9088 11.6932 10.9495 11.7869 11.0182 11.8588L15.0493 15.8898C15.1961 16.0367 15.4336 16.0367 15.5805 15.8898L15.8898 15.5805C16.0367 15.4336 16.0367 15.1961 15.8898 15.0493ZM6.49968 11.9994C3.45921 11.9994 0.999951 9.54016 0.999951 6.49968C0.999951 3.45921 3.45921 0.999951 6.49968 0.999951C9.54016 0.999951 11.9994 3.45921 11.9994 6.49968C11.9994 9.54016 9.54016 11.9994 6.49968 11.9994Z">
                                </path>
                            </svg>
                        </div>
                        <input name="search"
                               id="search"
                               type="text"
                               placeholder="Enter Hunt name to filter results"
                               class="px-14 py-5 w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 text-xl">
                    </div>
                    <button type="submit"
                            class="px-8 bg-red-500 hover:bg-red-800 text-white text-2xl font-medium rounded-md">
                        {% trans "Search" %}
                    </button>
                </div>
                <div class="flex items-center text-4xl justify-between mt-10">
                    <p class="font-medium">{% trans "Filter Hunts" %}</p>
                </div>
                <div>
                    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mt-4">
                        <select id="hunt_type"
                                name="hunt_type"
                                class="px-4 py-2 w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 text-xl">
                            <option value="all">All</option>
                            <option value="upcomming">Upcomming</option>
                            <option value="ongoing">Ongoing</option>
                            <option value="ended">Ended</option>
                        </select>
                        <select id="domain"
                                name="domain"
                                class="px-4 py-2 rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 text-xl">
                            <option>Select Domain</option>
                            {% for domain in domains %}<option value="{{ domain.id }}">{{ domain.name }}</option>{% endfor %}
                        </select>
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/datepicker.min.js"
                                integrity="sha384-sMp3hQy59Ay78X8c2o+5dDPZUFdUdYUKT8tbVKVfeyA735e1vIlRsH5vsjbHMDLX"
                                crossorigin="anonymous"></script>
                        <div date-rangepicker class="flex items-center">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-7 h-7 text-gray-500"
                                         aria-hidden="true"
                                         xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor"
                                         viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input name="start_date"
                                       id="start_date"
                                       type="text"
                                       class="bg-gray-50 border border-gray-300 text-gray-900 text-xl placeholder:text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-14 p-3"
                                       placeholder="Select date start">
                            </div>
                            <span class="mx-4 text-gray-500">to</span>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-7 h-7 text-gray-500"
                                         aria-hidden="true"
                                         xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor"
                                         viewBox="0 0 20 20">
                                        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
                                    </svg>
                                </div>
                                <input name="end_date"
                                       id="end_date"
                                       type="text"
                                       class="bg-gray-50 border border-gray-300 text-gray-900 text-xl placeholder:text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-14 p-3"
                                       placeholder="Select date end">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="flex items-center rounded-lg shadow-lg flex-wrap w-[97%] bg-gray-100 justify-between mt-10 sm:justify-center overflow-x-scroll">
            {% for hunt in hunts %}
                <div class="flex justify-between flex-col md:flex-row w-[700px] min-h-[200px] m-5 rounded-lg overflow-hidden bg-gray-700 p-[1px]">
                    <div class="w-full md:w-10 bg-gray-700 flex items-center justify-center  md:rotate-180">
                        <p class="text-white  md:rotate-90 font-bold text-2xl tracking-widest">HUNT</p>
                    </div>
                    <div class="flex w-full min-h-full bg-white">
                        <div class="flex h-full items-center">
                            <div class="w-[250px] h-[200px] p-5">
                                <img src="{{ hunt.logo }}"
                                     class="w-full h-full object-fill"
                                     alt="Bughunt Logo"
                                     width="100%"
                                     height="100%">
                            </div>
                        </div>
                        <div class="flex flex-col w-[70%] h-full pt-7">
                            <p class="text-black text-4xl font-semibold">{{ hunt.name }}</p>
                            <div class="flex flex-col justify-between h-1/2  mt-10">
                                <div class="flex flex-col md:flex-row md:justify-between">
                                    <div class="md:mt-0 w-full py-3 mr-4 rounded-lg flex items-center">
                                        <i class="fa-solid fa-calendar-days text-3xl mr-6 text-gray-600"></i>
                                        <p class="text-black font-semibold">
                                            {{ hunt.starts_on|date:"F" }} {{ hunt.starts_on__day }} {{ hunt.starts_on__year }} - {{ hunt.end_on|date:"F" }} {{ hunt.end_on__day }} {{ hunt.end_on__year }}
                                        </p>
                                    </div>
                                </div>
                                <div class="flex flex-col md:flex-row md:justify-between">
                                    <div class="w-full rounded-lg flex items-center">
                                        <i class="fa-solid fa-globe text-3xl mr-5 text-gray-600"></i>
                                        <a href="{{ hunt.url }}" class="text-black font-semibold">{{ hunt.url }}</a>
                                    </div>
                                </div>
                                <div class="flex flex-col md:flex-row md:justify-between">
                                    <div class="w-full py-3 rounded-lg flex items-center">
                                        <i class="fa-solid fa-dollar-sign text-3xl mr-8 text-gray-600"></i>
                                        <p class="text-black font-semibold">{{ hunt.total_prize|default:"" }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex w-full mt-5 mb-10">
                                <a href="{% url 'show_bughunt' hunt.id %}"
                                   class="mt-3 md:mt-0 w-full md:w-full py-3 mr-4 bg-red-500 rounded-lg flex items-center justify-center hover:bg-red-700">
                                    <p class="text-white font-semibold">MORE INFO</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock content %}