{% extends 'backend/components/layouts/default.html' %}
{% load static %}

{% block content %}
<div class="grid lg:grid-cols-1 grid-cols-1 gap-6">

    <div class="border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6 pt-12 mt-8 relative">
        <div class="bg-primary absolute text-white-light left-6 -top-8 w-16 h-16 rounded-md flex items-center justify-center mb-5 mx-auto">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 22L2 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path opacity="0.5" d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M4 22V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path d="M20 22V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                <path opacity="0.5" d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22" stroke="currentColor" stroke-width="1.5" />
                <path opacity="0.5" d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z" stroke="currentColor" stroke-width="1.5" />
            </svg>
        </div>
        <h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light">Projects:</h5>
        
    </div>
    <br/>
    <div class="panel h-full w-full">
        <div class="mb-5 text-lg font-bold">Camp Navigation.
            <div class="mb-2 text-sm font-semibold">Quick Camp Navigation.</div>
        </div>
        <div class="mb-4 items-center justify-between sm:flex">
            <div class="mt-6 flex flex-wrap items-center gap-2 sm:mt-0" >
                <a href="{% url 'add_participant' %}" class="btn btn-info">Add Camp Participants</a>
                <a href="{% url 'add_feedback' %}" class="btn btn-warning">Add Participants Camp Feedback</a>
                <a href="{% url 'add_tree_planting' %}" class="btn btn-dark">Record Number of trees Planted</a>

            </div>
        </div>
        <br/>
        
    </div>
    <br/>

    <div class="panel h-full w-full">
        <div class="flex items-center justify-between mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">{{webdata.title}} Projects List.</h5>
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-1 gap-6">
            {% include "backend/Camp/CampItems/table.html" %}

        </div>
    </div>

    <br/>
    <div class="panel h-full w-full">
        <div class="flex items-center justify-between mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">Camp participants List.</h5>
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-1 gap-6">
            {% include "backend/Camp/participants/table.html" %}

        </div>
    </div>

    
    <div class="panel h-full w-full">
        <div class="flex items-center justify-between mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">Workshop participant attended List.</h5>
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-1 gap-6">
            {% include "backend/Camp/participant_workshops/table.html" %}

        </div>
    </div>

    <div class="panel h-full w-full">
        <div class="flex items-center justify-between mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">Camp Services.</h5>
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-1 gap-6">
            {% include "backend/Camp/services/table.html" %}

        </div>
    </div>

    
    <div class="panel h-full w-full">
        <div class="flex items-center justify-between mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">Trees planted Table.</h5>
        </div>
        <div class="grid grid-cols-1 xl:grid-cols-1 gap-6">
            {% include "backend/Camp/tree_planting/table.html" %}

        </div>
    </div>
</div>
<br/>
<script>
    function confirmDelete(formId) {
        new window.Swal({
            icon: 'warning',
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonText: 'Delete',
            padding: '2em',
        }).then((result) => {
            if (result.value) {
                document.querySelector(formId).submit();
            }
        });
    }
</script>
{% endblock %}