{% extends "main.html" %}
{%load static%}
{% block content %}


<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5 flex flex-col gap-10">
    <h1 class="text-3xl text-secondosiblue text-center font-semibold">
        Settings
    </h1>


    <!-- DEPARTMENTS -->
    <div class="w-full">
        <div class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
            <div class="px-3">
                <p class="text-secondosiblue uppercase font-bold">Departments</p>
            </div>

            <button
                class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center xsmallPopupButton"
                data-modal-url="{% url 'addticketdepartmentmodal' %}">
                <i class="fa fa-plus"></i>
            </button>
        </div>


        <div class="w-full flex flex-col gap-3 mt-3">
            <div
                class="w-full rounded-md py-5 px-3 bg-secondosiblue border border-secondosiblue flex justify-between items-center gap-3 text-gray-50">
                <p class="text-sm sm:text-[17px]">Departnet Name</p>

                <p class="text-sm sm:text-base">10-2-2024</p>
            </div>

            <div
                class="w-full rounded-md py-5 px-3 bg-gray-50 border border-gray-100 flex justify-between items-center gap-3 text-secondosiblue">
                <p class="text-sm sm:text-[17px]">Departnet Name</p>

                <p class="text-sm sm:text-base">10-2-2024</p>
            </div>

            <div
                class="w-full rounded-md py-5 px-3 bg-gray-50 border border-gray-100 flex justify-between items-center gap-3 text-secondosiblue">
                <p class="text-sm sm:text-[17px]">Departnet Name</p>

                <p class="text-sm sm:text-base">10-2-2024</p>
            </div>
        </div>
    </div>


    <!-- MEMBERS -->
    <div class="w-ful">
        <div class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
            <div class="px-3">
                <p class="text-secondosiblue uppercase font-bold">Members</p>
            </div>

            <button
                class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center xsmallPopupButton"
                data-modal-url="{% url 'addticketmembermodal' %}">
                <i class="fa fa-plus"></i>
            </button>
        </div>


        <div class="w-full grid grid-cols-1 l:grid-cols-2 xl:grid-cols-3 gap-3 mt-3">
            <!-- PROJECT MANAGER -->
            <a>
                <div
                    class="w-full h-full flex flex-col gap-1 px-3 py-3 bg-gray-100 rounded-md shadow-md cursor-pointer hover:scale-105 duration-500">
                    <div class="w-full flex justify-between items-center gap-1">
                        <div class="flex justify-start items-center gap-2">
                            <div class="w-[45px] h-[45px] rounded-full bg-white">
                                {% if project.manager.image %}
                                <img src="{{member.image.url}}" class="w-full h-full rounded-full object-cover">
                                {% else %}
                                <img src="{% static 'images/default-user.png' %}"
                                    class="w-full h-full rounded-full object-cover">
                                {% endif %}
                            </div>


                            <div>
                                <p class="text-secondosiblue font-light">Emile Elliye</p>
                                <div class="text-xs bg-secondosiblue text-white shadow-md py-1 px-2 rounded-md">
                                    <p>Project Manager</p>
                                </div>
                            </div>
                        </div>

                        <div
                            class="w-[30px] h-[30px] rounded-md shadow-md text-white bg-secondosiblue border border-osiblue flex justify-center items-center cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" fill="none">
                                <path d="M19.0005 4.99988L5.00045 18.9999M5.00045 4.99988L19.0005 18.9999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>


{% endblock %}