{% extends 'base/base.html' %}
{% load static %}

{% block content %}
<div class="g-sidenav-show bg-gray-100">
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg">
        <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
             navbar-scroll="true">
            <div class="container-fluid py-1 px-3">
                <!-- Toggle button for mobile view -->
                <button class="navbar-toggler d-xl-none d-flex align-items-center px-2" type="button"
                        data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                        <div class="sidenav-toggler-inner">
                            <i class="sidenav-toggler-line"></i>
                            <i class="sidenav-toggler-line"></i>
                            <i class="sidenav-toggler-line"></i>
                        </div>
                    </span>
                </button>

                <!-- Collapsible part of the navbar -->
                <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                    <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                        <!-- Optional: search bar or other items -->
                    </div>
                    <ul class="navbar-nav justify-content-end">
                        <li class="nav-item">
                            <a class="nav-link text-body font-weight-bold px-3" href="{% url 'home' %}">
                                <i class="fas fa-home me-1"></i>
                                <span class="d-sm-inline d-none">Home</span>
                                <span class="d-sm-none d-inline">Home</span>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-body font-weight-bold px-3" href="{% url 'dashboard' %}">
                                <i class="fas fa-info-circle me-1"></i>
                                <span class="d-sm-inline d-none">Pavilion</span>
                                <span class="d-sm-none d-inline">Pavilion</span>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-body font-weight-bold px-3" href="{% url 'calendar' %}">
                                <i class="fas fa-concierge-bell me-1"></i>
                                <span class="d-sm-inline d-none">Events Calendar</span>
                                <span class="d-sm-none d-inline">Events Calendar</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-body font-weight-bold px-3" href="{% url 'attendance' %}">
                                <i class="fas fa-concierge-bell me-1"></i>
                                <span class="d-sm-inline d-none">Attendance</span>
                                <span class="d-sm-none d-inline">Attedance</span>
                            </a>
                        </li>
                        {% if request.user.is_authenticated %}
                            <li class="nav-item d-flex align-items-center">
                                <a href="{% url 'logout' %}" class="nav-link text-body font-weight-bold px-3">
                                    <i class="fa fa-user me-sm-1"></i>
                                    <span class="d-sm-inline d-none">Sign Out</span>
                                    <span class="d-sm-none d-inline">Sign Out</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="nav-item d-flex align-items-center">
                                <a href="{% url 'login' %}" class="nav-link text-body font-weight-bold px-3">
                                    <i class="fa fa-user me-sm-1"></i>
                                    <span class="d-sm-inline d-none">Sign In</span>
                                    <span class="d-sm-none d-inline">Sign In</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-10">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white border-0 text-center">
                            <h3 class="mb-0 fw-bold">COP30 Attendance Form</h3>
                        </div>

                        <div class="card-body">
                            <form method="POST" enctype="multipart/form-data" novalidate>
                                {% csrf_token %}
                                {{ form.as_p }}

                                <div class="d-flex justify-content-end mt-3">
                                    <button type="submit" class="btn btn-primary">
                                        Save Attendance
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% include 'base/footer.html' %}
    </main>
</div>
{% endblock content %}