{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Features" %} - Eenos
{% endblock title %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Features" %}</h1>
            <div class="eenos-page-subtitle">
                {% translate "Manage the service collections available when creating hosting accounts." %}
            </div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'addfeature' %}" class="btn btn-primary btn-sm text-nowrap">
                <i data-lucide="plus"></i>
                {% translate "Create Feature" %}
            </a>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Hosting" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span>{% translate "Features" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true"><i data-lucide="chevron-right"></i></span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "List Features" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-notice eenos-notice-info mt-4 mb-4">
        <div class="eenos-notice-icon" aria-hidden="true">
            <i data-lucide="info"></i>
        </div>
        <div class="eenos-notice-content">
            <div class="eenos-notice-title">{% translate "Feature ownership" %}</div>
            <div class="eenos-notice-text">
                {% translate "You can review all available features, but only features owned by your reseller account can be edited or deleted." %}
            </div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <div class="eenos-panel-title">{% translate "Available Features" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Review enabled services and manage your reseller-owned feature sets." %}</div>
            </div>
            <i data-lucide="list-checks" class="eenos-card-action-icon"></i>
        </div>
        <div class="table-responsive">
            <table id="eenos-data-table"
                   class="table table-sm table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>{% translate "Feature Name" %}</th>
                        <th>{% translate "Owner" %}</th>
                        <th>{% translate "Addon Domains" %}</th>
                        <th>{% translate "Alias Domains" %}</th>
                        <th>{% translate "Subdomains" %}</th>
                        <th>{% translate "FTP" %}</th>
                        <th>{% translate "MySQL" %}</th>
                        <th>{% translate "DNS" %}</th>
                        <th>{% translate "Email" %}</th>
                        <th>{% translate "Backups" %}</th>
                        <th>{% translate "Actions" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <form method="post" id="feature-delete-form">
        {% csrf_token %}
        <input type="hidden" name="feature_delete" id="feature-delete" value="" />
        <input type="hidden" name="feature_name" id="delete-feature-name" value="" />
    </form>
    <div class="modal fade"
         id="deleteFeatureModal"
         tabindex="-1"
         aria-labelledby="deleteFeatureModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title d-flex align-items-center gap-2"
                        id="deleteFeatureModalLabel">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete Hosting Feature" %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-notice eenos-notice-warning mb-3">
                        <div class="eenos-notice-icon" aria-hidden="true">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "This action cannot be undone" %}</div>
                            <div class="eenos-notice-text">{% translate "The selected hosting feature will be permanently removed." %}</div>
                        </div>
                    </div>
                    <div class="small text-muted">{% translate "Feature to delete" %}</div>
                    <div class="fw-semibold" id="delete-feature-display"></div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Keep Feature" %}</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete-feature">
                        <i data-lucide="trash-2"></i>
                        {% translate "Delete Feature" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_js %}
    <script>
      (function ($) {
        "use strict";
        $(function () {
          const deleteModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("deleteFeatureModal"));
          const escapeHtml = value => $("<div>").text(String(value || "")).html();
          const state = function (value, type) {
            if (type !== "display") return value;
            return value === "on"
              ? '<span class="text-success" role="img" title="{% translate "Enabled" %}" aria-label="{% translate "Enabled" %}"><i data-lucide="circle-check"></i></span>'
              : '<span class="text-danger" role="img" title="{% translate "Disabled" %}" aria-label="{% translate "Disabled" %}"><i data-lucide="circle-minus"></i></span>';
          };

          $("#eenos-data-table").DataTable({
            responsive: { details: { renderer: DataTable.Responsive.renderer.listHiddenNodes() } },
            processing: true,
            autoWidth: false,
            order: [[0, "asc"]],
            ajax: { url: "{% url 'reseller_feature_list' %}", type: "GET", dataSrc: "data" },
            pageLength: 25,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "{% translate 'All' %}"]],
            columns: [
              {
                data: "feature_name",
                width: "180px",
                className: "text-nowrap",
                responsivePriority: 1,
                render: function (data, type, row) {
                  if (type !== "display") return data;
                  const name = escapeHtml(data);
                  return row.default
                    ? `<div class="d-inline-flex align-items-center align-middle gap-2"><span class="fw-semibold">${name}</span><span class="badge bg-light text-dark border">{% translate "Default" %}</span></div>`
                    : `<span class="fw-semibold">${name}</span>`;
                }
              },
              { data: "owner", responsivePriority: 2, render: $.fn.dataTable.render.text() },
              { data: "addondomains", responsivePriority: 5, render: state },
              { data: "parkeddomains", responsivePriority: 6, render: state },
              { data: "subdomains", responsivePriority: 7, render: state },
              { data: "ftp", responsivePriority: 8, render: state },
              { data: "mysql", responsivePriority: 9, render: state },
              { data: "dns", responsivePriority: 10, render: state },
              { data: "email", responsivePriority: 11, render: state },
              { data: "backup", responsivePriority: 12, render: state },
              {
                data: null,
                width: "110px",
                orderable: false,
                searchable: false,
                responsivePriority: 1,
                render: function (data, type, row) {
                  if (type !== "display") return "";
                  const name = escapeHtml(row.feature_name);
                  const url = escapeHtml(row.edit_url);
                  let actions = `<div class="eenos-dt-actions">`;
                  if (row.is_managed) {
                    actions += `
                      <button type="button" class="btn btn-sm btn-outline-secondary edit-feature" value="${name}" data-edit-url="${url}" title="{% translate 'Edit Feature' %}" aria-label="{% translate 'Edit Feature' %}">
                        <i data-lucide="pencil"></i>
                      </button>
                      <button type="button" class="btn btn-sm btn-outline-danger delete-feature" value="${name}" title="{% translate 'Delete Feature' %}" aria-label="{% translate 'Delete Feature' %}">
                        <i data-lucide="trash-2"></i>
                      </button>
                    `;
                  } else {
                    actions += `
                      <button type="button" class="btn btn-sm btn-outline-secondary view-feature" value="${name}" data-view-url="${url}" title="{% translate 'View Feature' %}" aria-label="{% translate 'View Feature' %}">
                        <i data-lucide="eye"></i>
                      </button>
                    `;
                  }
                  actions += `</div>`;
                  return actions;
                }
              }
            ],
            language: {
              loadingRecords: "&nbsp;",
              processing: "{% translate 'Loading...' %}",
              emptyTable: "{% translate 'No hosting features have been configured.' %}",
              zeroRecords: "{% translate 'No matching hosting features found.' %}",
              search: "{% translate 'Search:' %}",
              lengthMenu: "{% translate 'Show' %} _MENU_",
              info: "{% translate 'Showing _START_ to _END_ of _TOTAL_ features' %}"
            },
            drawCallback: function () {
              if (typeof lucide !== "undefined") lucide.createIcons();
            }
         }).on("responsive-display", function () {
           if (typeof lucide !== "undefined") lucide.createIcons();
         });

          $(document).on("click", ".edit-feature", function () {
            window.location.href = $(this).data("edit-url");
          });

          $(document).on("click", ".view-feature", function () {
            window.location.href = $(this).data("view-url");
          });

          $(document).on("click", ".delete-feature", function () {
            const name = $(this).val();
            $("#delete-feature-name").val(name);
            $("#delete-feature-display").text(name);
            deleteModal.show();
          });

          $("#confirm-delete-feature").on("click", function () {
            $("#feature-delete").val("yes");
            document.getElementById("feature-delete-form").submit();
          });
        });
      })(jQuery);
    </script>
{% endblock extra_js %}