{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Cache Purge" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Cache Purge" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Clear server-side cached content for a complete domain or a specific website URL." %}</div>
        </div>
        <div class="col-12 col-sm-auto">
            <a href="{% url 'listall_domains' %}"
               class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2 w-100">
                <i data-lucide="list"></i>
                <span>{% translate "All Domains" %}</span>
            </a>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Domains" %}</span>
        <span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current">{% translate "Cache Purge" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <form method="post"
          id="urlPurgeForm"
          class="eenos-form mb-4"
          data-parsley-validate>
        {% csrf_token %}
        <input type="hidden" name="url_purge" value="yes">
        <div class="eenos-card">
            <div class="eenos-card-header">
                <div>
                    <h2 class="eenos-card-title">{% translate "Purge a Specific URL" %}</h2>
                    <p class="eenos-card-subtitle">{% translate "Remove the cached copy of one page or resource without clearing the entire website cache." %}</p>
                </div>
                <div class="eenos-card-action-icon">
                    <i data-lucide="link"></i>
                </div>
            </div>
            <div class="eenos-notice eenos-notice-info mb-4">
                <i data-lucide="info"></i>
                <div>{% translate "Enter a complete HTTP or HTTPS URL belonging to one of your hosted domains." %}</div>
            </div>
            <div class="row g-3">
                <div class="col-lg-8">
                    <label class="form-label" for="purgeUrl">{% translate "Website URL" %}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i data-lucide="globe-2"></i></span>
                        <input type="url"
                               id="purgeUrl"
                               class="form-control"
                               name="url"
                               placeholder="https://example.com/page"
                               required
                               data-parsley-required-message="{% translate 'Please enter the website URL whose cache should be purged.' %}"
                               data-parsley-type-message="{% translate 'Please enter a complete and valid HTTP or HTTPS URL.' %}">
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column flex-sm-row justify-content-end gap-2 mt-3">
            <button type="button"
                    id="openUrlPurgeModal"
                    class="btn btn-primary d-flex align-items-center justify-content-center gap-2">
                <i data-lucide="refresh-cw"></i>
                <span>{% translate "Purge URL Cache" %}</span>
            </button>
        </div>
    </form>
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Purge Domain Cache" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Clear all cached content for a selected hosted domain." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="refresh-cw"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="domainsTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Domain" %}</th>
                        <th>{% translate "Document Root" %}</th>
                        <th>{% translate "Action" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="modal fade"
         id="urlPurgeModal"
         tabindex="-1"
         aria-labelledby="urlPurgeModalTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="urlPurgeModalTitle">{% translate "Purge URL Cache" %}</h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-info mb-4">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="link"></i>
                        </div>
                        <div class="eenos-modal-info-content min-w-0">
                            <div class="eenos-modal-info-label">{% translate "Selected URL" %}</div>
                            <div class="eenos-modal-info-value text-break" id="urlPurgeTarget"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning mb-0">
                        <i data-lucide="triangle-alert"></i>
                        <div>
                            <strong>{% translate "Cached content will be removed" %}</strong>
                            <div>{% translate "The next request to this URL may take longer while the server generates and stores a fresh cached response." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="button"
                            id="confirmUrlPurge"
                            class="btn btn-warning d-flex align-items-center gap-2">
                        <i data-lucide="refresh-cw"></i>
                        <span>{% translate "Purge Cache" %}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% include "includes/domain_actions.html" %}
{% endblock %}
{% block extra_js %}
    {% include "includes/domain_actions_js.html" %}
    <script>
$(function () {
    initDomainActions({selectedLabel: "{% translate 'Selected domain' %}"});
    const urlForm = $("#urlPurgeForm");
    const urlModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("urlPurgeModal"));

    $("#openUrlPurgeModal").on("click", function () {
        const parsley = urlForm.parsley();
        parsley.validate();
        if (!parsley.isValid()) return;
        $("#urlPurgeTarget").text($("#purgeUrl").val().trim());
        urlModal.show();
        lucide.createIcons();
    });

    $("#confirmUrlPurge").on("click", function () {
        this.disabled = true;
        urlForm.trigger("submit");
    });

    const table = $("#domainsTable").DataTable({
        processing: true,ajax: {url: "{% url 'cache_purge_domains_data' %}", dataSrc: "data"},
        pageLength: 25,
        order: [[0, "asc"]],
        language: {lengthMenu: "{% translate "_MENU_ Rows per page" %}", loadingRecords: "&nbsp;", processing: "{% translate "Loading..." %}", emptyTable: "{% translate "No domains have been configured." %}", zeroRecords: "{% translate "No matching domains found." %}"},
        responsive: true,
        columns: [
            {
                data: "domain",
                responsivePriority: 1,
                className: "text-nowrap",
                render: function (domain, type, row) {
                    if (type !== "display") return domain;
                    const url = row.site_url || ("https://" + domain.replace(/^\*\./, ""));
                    return '<a href="' + domainEscape(url) + '" target="_blank" rel="noopener noreferrer" class="d-inline-flex align-items-center gap-1">' + domainEscape(domain) + '<i data-lucide="external-link"></i></a>';
                }
            },
            {
                data: "document_root",
                responsivePriority: 3,
                className: "text-nowrap",
                render: function (root, type) {
                    if (type !== "display") return root || "";
                    const path = String(root || "").replace(/^\/+/, "");
                    return '<span class="d-inline-flex align-items-center gap-1 font-monospace"><i data-lucide="home"></i><span>/' + domainEscape(path) + '</span></span>';
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                responsivePriority: 2,
                className: "text-end text-nowrap",
                render: function (data, type, row) {
                    if (type !== "display") return "";
                    return '<div class="eenos-dt-actions justify-content-end">' + domainButton("refresh-cw", "{% translate 'Purge domain cache' %}", "purge", row, "warning") + '</div>';
                }
            }
        ],
        drawCallback: function () {
            lucide.createIcons();
        }
    });

    table.on("responsive-display", function () {
        lucide.createIcons();
    });
});
    </script>
{% endblock %}