{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Manage ODP - CWN{% endblock %}

{% block content %}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

{% if messages %}
<script>
    {% for message in messages %}
        Swal.fire({
            icon: "{{ message.tags }}",
            title: "{{ message.tags|title }}",
            text: "{{ message }}",
            timer: 2000,
            showConfirmButton: false
        });
    {% endfor %}
</script>
{% endif %}


<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Judul -->
    <h2 class="text-center text-white py-3 rounded mb-6 mt-4 bg-red-600 shadow">
        Monitoring ODP Existing
    </h2>

    <!-- Tambah Data ODP -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="bg-red-600 text-white px-4 py-2 rounded-t-lg font-semibold">
            Tambah Data ODP
        </div>
        <div class="p-4">
            <form method="post" action="{% url 'tambah_odp' %}" class="space-y-4">
                {% csrf_token %}
                <div class="grid grid-cols-1 md:grid-cols-6 gap-3">
                    <input type="text" name="nama_odp" placeholder="Nama ODP"
                        class="border rounded p-2 w-full" required>
                    <input type="text" name="latitude" placeholder="Latitude Ex: -6.980331"
                        class="border rounded p-2 w-full" required>
                    <input type="text" name="longitude" placeholder="Longitude Ex: 110.408295"
                        class="border rounded p-2 w-full" required>
                    <input type="number" name="available" placeholder="Available"
                        class="border rounded p-2 w-full" required>
                    <input type="text" name="sto" placeholder="STO"
                        class="border rounded p-2 w-full" required>
                    <input type="date" name="golive_date"
                        class="border rounded p-2 w-full" required>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-6 gap-3">
                    <select name="kategori_occ" class="border rounded p-2 w-full" required>
                        <option value="">Pilih Kategori OCC</option>
                        <option value="BLACK">BLACK</option>
                        <option value="BLACK (NEW ODP)">BLACK (NEW ODP)</option>
                        <option value="GREEN">GREEN</option>
                        <option value="YELLOW">YELLOW</option>
                        <option value="RED">RED</option>
                        <option value="Unknown">Unknown</option>
                    </select>
                    <input type="text" name="kab_kota" placeholder="Kab/Kota"
                        class="border rounded p-2 w-full" required>
                    <input type="text" name="kecamatan" placeholder="Kecamatan"
                        class="border rounded p-2 w-full" required>
                    <input type="text" name="kelurahan" placeholder="Kelurahan"
                        class="border rounded p-2 w-full" required>
                    <input type="text" name="sa" placeholder="SA"
                        class="border rounded p-2 w-full" required>
                    <input type="text" name="hsa" placeholder="HSA"
                        class="border rounded p-2 w-full" required>
                </div>
                <button type="submit"
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded shadow w-full md:w-auto">
                    Tambah
                </button>
            </form>
        </div>
    </div>

    <!-- Upload Excel -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="bg-red-600 text-white px-4 py-2 rounded-t-lg font-semibold">
            Upload Data ODP via Excel
        </div>
        <div class="p-4">
            <form id="excel-upload-form" method="post" enctype="multipart/form-data" action="{% url 'upload_excel_odp' %}">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="excel_file" class="block mb-2 font-medium">Klik atau tarik file Excel ke area ini:</label>
                    <div id="drop-area"
                        class="border-2 border-dashed border-gray-300 rounded p-6 text-center cursor-pointer bg-gray-50 hover:bg-gray-100 transition">
                        <p class="text-gray-500 mb-2">Tarik & letakkan file Excel di sini, atau klik untuk memilih</p>
                        <input type="file" id="excel_file" name="excel_file" class="hidden" accept=".xlsx, .xls">
                        <span id="file-name" class="text-green-600 font-semibold"></span>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded shadow">
                        Upload
                    </button>
                    <a href="https://docs.google.com/spreadsheets/d/1fXXZ0WDTN-cmJpGRE1iuJA_bK4dUz23d/edit?usp=sharing"
                        class="text-blue-600 underline">
                        Download Contoh Format Excel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Filter & Data -->
    <div class="bg-white rounded-lg shadow">
        <div class="bg-red-600 px-4 py-3 rounded-t-lg flex flex-col md:flex-row gap-3">
            <input type="text" id="search_odp"
                class="border rounded p-2 w-full md:w-1/2"
                placeholder="Cari ODP..." value="{{ request.GET.search_odp }}">
        </div>
        <div class="p-4">
            <!-- Filter -->
            <form method="get" class="space-y-4 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                    <select name="kategori_occ" class="border rounded p-2">
                        <option value="">Semua Kategori</option>
                        <option value="BLACK" {% if request.GET.kategori_occ == 'BLACK' %}selected{% endif %}>BLACK</option>
                        <option value="BLACK (NEW ODP)" {% if request.GET.kategori_occ == 'BLACK (NEW ODP)' %}selected{% endif %}>BLACK (NEW ODP)</option>
                        <option value="GREEN" {% if request.GET.kategori_occ == 'GREEN' %}selected{% endif %}>GREEN</option>
                        <option value="YELLOW" {% if request.GET.kategori_occ == 'YELLOW' %}selected{% endif %}>YELLOW</option>
                        <option value="RED" {% if request.GET.kategori_occ == 'RED' %}selected{% endif %}>RED</option>
                        <option value="Unknown" {% if request.GET.kategori_occ == 'Unknown' %}selected{% endif %}>Unknown</option>
                    </select>
                    <input list="kabkota-list" name="kab_kota" class="border rounded p-2" placeholder="Kab/Kota" value="{{ request.GET.kab_kota }}">
                    <datalist id="kabkota-list">
                        {% for k in kab_kota_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>
                    <input list="kecamatan-list" name="kecamatan" class="border rounded p-2" placeholder="Kecamatan" value="{{ request.GET.kecamatan }}">
                    <datalist id="kecamatan-list">
                        {% for k in kecamatan_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>
                    <input list="kelurahan-list" name="kelurahan" class="border rounded p-2" placeholder="Kelurahan" value="{{ request.GET.kelurahan }}">
                    <datalist id="kelurahan-list">
                        {% for k in kelurahan_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-6 gap-3">
                    <input type="date" name="golive_date" class="border rounded p-2" value="{{ request.GET.golive_date }}">
                    <input list="tahun-list" name="tahun" class="border rounded p-2" placeholder="Pilih Tahun" value="{{ request.GET.tahun }}">
                    <datalist id="tahun-list">
                        {% for k in tahun_list %}
                            <option value="{{ k }}">
                        {% endfor %}
                    </datalist>
                    <select name="bulan" class="border rounded p-2">
                        <option value="">Bln</option>
                        <option value="1" {% if selected_bulan == "1" %}selected{% endif %}>01</option>
                        <option value="2" {% if selected_bulan == "2" %}selected{% endif %}>02</option>
                        <option value="3" {% if selected_bulan == "3" %}selected{% endif %}>03</option>
                        <option value="4" {% if selected_bulan == "4" %}selected{% endif %}>04</option>
                        <option value="5" {% if selected_bulan == "5" %}selected{% endif %}>05</option>
                        <option value="6" {% if selected_bulan == "6" %}selected{% endif %}>06</option>
                        <option value="7" {% if selected_bulan == "7" %}selected{% endif %}>07</option>
                        <option value="8" {% if selected_bulan == "8" %}selected{% endif %}>08</option>
                        <option value="9" {% if selected_bulan == "9" %}selected{% endif %}>09</option>
                        <option value="10" {% if selected_bulan == "10" %}selected{% endif %}>10</option>
                        <option value="11" {% if selected_bulan == "11" %}selected{% endif %}>11</option>
                        <option value="12" {% if selected_bulan == "12" %}selected{% endif %}>12</option>
                    </select>
                    <input type="number" name="tanggal" min="1" max="31" class="border rounded p-2" placeholder="Tgl" value="{{ request.GET.tanggal }}">
                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded shadow col-span-2">
                        Filter
                    </button>
                </div>
            </form>

            {% if data %}
            <div class="overflow-x-auto">
                <table id="table-odp" class="min-w-full text-sm text-center border border-gray-200">
                    <thead class="bg-gray-800 text-white">
                        <tr>
                            <th class="px-2 py-2">No</th>
                            <th class="px-2 py-2">Nama ODP</th>
                            <th class="px-2 py-2">Latitude</th>
                            <th class="px-2 py-2">Longitude</th>
                            <th class="px-2 py-2">Available</th>
                            <th class="px-2 py-2">STO</th>
                            <th class="px-2 py-2">Kab/Kota</th>
                            <th class="px-2 py-2">Kecamatan</th>
                            <th class="px-2 py-2">Kelurahan</th>
                            <th class="px-2 py-2">SA</th>
                            <th class="px-2 py-2">HSA</th>
                            <th class="px-2 py-2">Kategori OCC</th>
                            <th class="px-2 py-2">Tgl Go Live</th>
                            <th class="px-2 py-2">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in data %}
                        <tr class="border-b hover:bg-gray-50">
                            <td>{{ forloop.counter }}</td>
                            <td contenteditable="false">{{ item.nama_odp }}</td>
                            <td contenteditable="false">{{ item.latitude }}</td>
                            <td contenteditable="false">{{ item.longitude }}</td>
                            <td contenteditable="false">{{ item.available }}</td>
                            <td contenteditable="false">{{ item.sto }}</td>
                            <td contenteditable="false">{{ item.kab_kota }}</td>
                            <td contenteditable="false">{{ item.kecamatan }}</td>
                            <td contenteditable="false">{{ item.kelurahan }}</td>
                            <td contenteditable="false">{{ item.sa }}</td>
                            <td contenteditable="false">{{ item.hsa }}</td>
                            <td contenteditable="false">{{ item.kategori_occ }}</td>
                            <td>{{ item.tanggal }}/{{ item.bulan }}/{{ item.tahun }}</td>
                            <td class="space-x-1">
                                <button class="btn-edit bg-yellow-500 hover:bg-yellow-600 text-white px-2 py-1 rounded text-xs"
                                        @click="data={
                                            nama_odp:'{{ item.nama_odp }}',
                                            latitude:'{{ item.latitude }}',
                                            longitude:'{{ item.longitude }}',
                                            available:'{{ item.available }}',
                                            sto:'{{ item.sto }}',
                                            kab_kota:'{{ item.kab_kota }}',
                                            kecamatan:'{{ item.kecamatan }}',
                                            kelurahan:'{{ item.kelurahan }}',
                                            sa:'{{ item.sa }}',
                                            hsa:'{{ item.hsa }}',
                                            kategori_occ:'{{ item.kategori_occ }}',
                                            golive_date:'{{ item.golive_date }}'
                                        }; open=true;">
                                    Edit
                                </button>
                                <button 
                                    class="btn-delete bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded text-xs"
                                    data-nama="{{ item.nama_odp }}" data-id="{{ item.id }}">
                                    Delete
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!-- PAGINATION -->
                <div class="mt-4 flex justify-center gap-2">
                    {% if page_obj.has_previous %}
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page=1"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&laquo;</a>
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.previous_page_number }}"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&laquo;</a>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
                            <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ num }}"
                            class="px-3 py-1 border rounded {% if num == page_obj.number %}bg-red-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
                            {{ num }}
                            </a>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.next_page_number }}"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&rsaquo;</a>
                        <a href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}page={{ paginator.num_pages }}"
                        class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">&raquo;</a>
                    {% endif %}
                </div>
            </div>
            {% else %}
            <div class="bg-red-100 text-blue-700 text-center py-3 rounded">
                Tidak ada data ODP untuk ditampilkan.
            </div>
            {% endif %}
        </div>
    </div>

    <!-- ======================== MODAL EDIT ODP ======================== -->
    <div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-lg">
            <h3 class="text-lg font-semibold mb-4">Edit ODP</h3>
            <form id="edit-odp-form">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                        <label for="edit-nama_odp" class="block text-sm font-medium mb-1">Nama ODP</label>
                        <input type="text" name="nama_odp" id="edit-nama_odp" class="border p-2 rounded w-full" placeholder="ODP">
                    </div>

                    <div>
                        <label for="edit-latitude" class="block text-sm font-medium mb-1">Latitude</label>
                        <input type="text" name="latitude" id="edit-latitude" class="border p-2 rounded w-full" placeholder="Latitude">
                    </div>

                    <div>
                        <label for="edit-longitude" class="block text-sm font-medium mb-1">Longitude</label>
                        <input type="text" name="longitude" id="edit-longitude" class="border p-2 rounded w-full" placeholder="Longitude">
                    </div>

                    <div>
                        <label for="edit-available" class="block text-sm font-medium mb-1">Available</label>
                        <input type="number" name="available" id="edit-available" class="border p-2 rounded w-full" placeholder="Available">
                    </div>

                    <div>
                        <label for="edit-sto" class="block text-sm font-medium mb-1">STO</label>
                        <input type="text" name="sto" id="edit-sto" class="border p-2 rounded w-full" placeholder="STO">
                    </div>

                    <div>
                        <label for="edit-kab_kota" class="block text-sm font-medium mb-1">Kab/Kota</label>
                        <input type="text" name="kab_kota" id="edit-kab_kota" class="border p-2 rounded w-full" placeholder="Kab/Kota">
                    </div>

                    <div>
                        <label for="edit-kecamatan" class="block text-sm font-medium mb-1">Kecamatan</label>
                        <input type="text" name="kecamatan" id="edit-kecamatan" class="border p-2 rounded w-full" placeholder="Kecamatan">
                    </div>

                    <div>
                        <label for="edit-kelurahan" class="block text-sm font-medium mb-1">Kelurahan</label>
                        <input type="text" name="kelurahan" id="edit-kelurahan" class="border p-2 rounded w-full" placeholder="Kelurahan">
                    </div>

                    <div>
                        <label for="edit-sa" class="block text-sm font-medium mb-1">SA</label>
                        <input type="text" name="sa" id="edit-sa" class="border p-2 rounded w-full" placeholder="SA">
                    </div>

                    <div>
                        <label for="edit-hsa" class="block text-sm font-medium mb-1">HSA</label>
                        <input type="text" name="hsa" id="edit-hsa" class="border p-2 rounded w-full" placeholder="HSA">
                    </div>

                    <div>
                        <label for="edit-kategori_occ" class="block text-sm font-medium mb-1">Kategori OCC</label>
                        <select name="kategori_occ" id="edit-kategori_occ" class="border p-2 rounded w-full">
                            <option value="">Semua Kategori</option>
                            <option value="BLACK">BLACK</option>
                            <option value="BLACK (NEW ODP)">BLACK (NEW ODP)</option>
                            <option value="GREEN">GREEN</option>
                            <option value="YELLOW">YELLOW</option>
                            <option value="RED">RED</option>
                            <option value="Unknown">Unknown</option>
                        </select>
                    </div>

                    <div>
                        <label for="edit-golive_date" class="block text-sm font-medium mb-1">Tgl Go Live</label>
                        <input type="date" name="golive_date" id="edit-golive_date" class="border p-2 rounded w-full">
                    </div>
                </div>

                <div class="mt-4 flex justify-end gap-2">
                    <button type="button" id="btn-cancel" class="px-4 py-2 bg-gray-300 rounded">Batal</button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ======================== JAVASCRIPT ======================== -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // ======================= Pencarian realtime =======================
    const searchInput = document.getElementById("search_odp");
    if (searchInput) {
        searchInput.addEventListener("keypress", function (e) {
            if (e.key === "Enter") {
                e.preventDefault();
                const searchValue = this.value.trim();
                const url = new URL(window.location.href);
                if (searchValue) {
                    url.searchParams.set("search_odp", searchValue);
                } else {
                    url.searchParams.delete("search_odp");
                }
                url.searchParams.set("page", 1);
                window.location.href = url.toString();
            }
        });
    }

    const modal = document.getElementById("edit-modal");
    const editForm = document.getElementById("edit-odp-form");
    const btnCancel = document.getElementById("btn-cancel");

    // fungsi buka modal
    function openModal(data) {
        document.getElementById("edit-nama_odp").value = data.nama_odp;
        document.getElementById("edit-latitude").value = data.latitude;
        document.getElementById("edit-longitude").value = data.longitude;
        document.getElementById("edit-available").value = data.available;
        document.getElementById("edit-sto").value = data.sto;
        document.getElementById("edit-kab_kota").value = data.kab_kota;
        document.getElementById("edit-kecamatan").value = data.kecamatan;
        document.getElementById("edit-kelurahan").value = data.kelurahan;
        document.getElementById("edit-sa").value = data.sa;
        document.getElementById("edit-hsa").value = data.hsa;

        // kategori_occ ke select
        document.getElementById("edit-kategori_occ").value = data.kategori_occ;

        // golive_date -> pastikan format YYYY-MM-DD
        if (data.golive_date) {
            document.getElementById("edit-golive_date").value = data.golive_date;
        }

        modal.classList.remove("hidden");
        modal.classList.add("flex");
    }

    // fungsi tutup modal
    function closeModal() {
        modal.classList.add("hidden");
        modal.classList.remove("flex");
    }

    // event tombol cancel
    btnCancel.addEventListener("click", closeModal);

    // event klik tombol edit
    document.querySelectorAll(".btn-edit").forEach((btn) => {
        btn.addEventListener("click", function () {
            const row = btn.closest("tr");
            const cells = row.querySelectorAll("td");

            // ambil tanggal
            const dateParts = cells[12].textContent.trim().split("/"); // [dd, mm, yyyy]
            let golive_date = "";
            if (dateParts.length === 3) {
                const [dd, mm, yyyy] = dateParts;
                golive_date = `${yyyy}-${mm.padStart(2, "0")}-${dd.padStart(2, "0")}`;
            }

            const currentData = {
                nama_odp: cells[1].textContent.trim(),
                latitude: cells[2].textContent.trim(),
                longitude: cells[3].textContent.trim(),
                available: cells[4].textContent.trim(),
                sto: cells[5].textContent.trim(),
                kab_kota: cells[6].textContent.trim(),
                kecamatan: cells[7].textContent.trim(),
                kelurahan: cells[8].textContent.trim(),
                sa: cells[9].textContent.trim(),
                hsa: cells[10].textContent.trim(),
                kategori_occ: cells[11].textContent.trim(),
                golive_date: golive_date // format YYYY-MM-DD
            };

            openModal(currentData);
        });
    });

    // submit edit
    editForm.addEventListener("submit", function (e) {
        e.preventDefault();
        const formData = Object.fromEntries(new FormData(editForm).entries());
        console.log("FormData yang dikirim:", formData); // debug
        fetch("{% url 'update_odp_ajax' %}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}",
            },
            body: JSON.stringify(formData),
        })
            .then((res) => res.json())
            .then((data) => {
                if (data.success) {
                    Swal.fire({
                        icon: "success",
                        title: "Berhasil!",
                        text: "Data berhasil diperbarui!",
                        timer: 1500,
                        showConfirmButton: false,
                    }).then(() => location.reload());
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Gagal!",
                        text: data.error || "Gagal update data",
                    });
                }
            });
    });

    // event klik tombol delete
    document.querySelectorAll(".btn-delete").forEach((btn) => {
        btn.addEventListener("click", function () {
            const nama_odp = this.dataset.nama; // ambil dari data-nama
            const id_odp = this.dataset.id; // ambil dari data-nama
            const row = this.closest("tr");

            Swal.fire({
                title: "Yakin ingin hapus?",
                text: `Data ODP ${nama_odp} akan dihapus permanen!`,
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Batal",
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch("{% url 'delete_odp_ajax' %}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRFToken": "{{ csrf_token }}",
                        },
                        body: JSON.stringify({ nama_odp }),
                    })
                    .then((res) => res.json())
                    .then((data) => {
                        if (data.status === "success") {
                            row.remove();
                            Swal.fire({
                                icon: "success",
                                title: "Terhapus!",
                                text: "Data berhasil dihapus!",
                                timer: 1500,
                                showConfirmButton: false,
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Gagal!",
                                text: data.message || "Gagal hapus data",
                            });
                        }
                    });
                }
            });
        });
    });

    // ======================= Drag & Drop Excel =======================
    const dropArea = document.getElementById("drop-area");
    const fileInput = document.getElementById("excel_file");
    const fileNameDisplay = document.getElementById("file-name");

    if (dropArea && fileInput && fileNameDisplay) {
        dropArea.addEventListener("click", () => fileInput.click());
        dropArea.addEventListener("dragover", (e) => {
            e.preventDefault();
            dropArea.classList.add("border-blue-500", "bg-red-50");
        });
        dropArea.addEventListener("dragleave", () => {
            dropArea.classList.remove("border-blue-500", "bg-red-50");
        });
        dropArea.addEventListener("drop", (e) => {
            e.preventDefault();
            dropArea.classList.remove("border-blue-500", "bg-red-50");
            const file = e.dataTransfer.files[0];
            fileInput.files = e.dataTransfer.files;
            fileNameDisplay.textContent = file.name;
        });
        fileInput.addEventListener("change", () => {
            const file = fileInput.files[0];
            if (file) fileNameDisplay.textContent = file.name;
        });
    }
});
</script>

{% endblock %}