{% extends "wagtailadmin/base.html" %}
{% load static wagtailadmin_tags %}

{% block titletag %}SkynetAccessibility Scanner{% endblock %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'wagtail_skynetaccessibility_scanner/css/skynet_scanner.css' %}">
{% endblock %}

{% block content %}

 
{# ── Custom header: logo inline with title ────────────────────────────── #}
<header style="
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 14px 20px;
  border-bottom: 2px solid #e8e0f5;
  margin-bottom: 8px;
">
  <img
    src="{% static 'wagtail_skynetaccessibility_scanner/img/assets/logo.png' %}"
    alt="SkynetAccessibility Logo"
    style="height: 42px; width: auto; display: block; flex-shrink: 0;"
  />
  <h1 style="
    font-size: 1.75rem;
    font-weight: 700;
    color: #420083;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
  ">SkynetAccessibility Scanner</h1>
</header>

<div class="nice-padding">

  <!-- ── Scanner App Root ─────────────────────────────────────────────── -->
  <div class="scanning-monitoring-app" id="skynetAppRoot">

    <div id="skynetLoading" class="skynet-loading-overlay">
      <img src="{% static 'wagtail_skynetaccessibility_scanner/img/assets/loader.gif' %}"
           alt="Loading..." style="width:64px;height:64px;"/>
      <p style="margin-top:12px;color:#420083;font-weight:500;">Loading accessibility data...</p>
    </div>

    <div id="skynetErrorBanner" class="skynet-error-banner" style="display:none;">
      <span>Warning: </span><span id="skynetErrorMsg"></span>
    </div>

    <!-- ── Email Registration Toggle ──────────────────────────────────── -->
    <!--
      Placed INSIDE .scanning-monitoring-app so it inherits the same
      max-width (1280px) and padding as the scanner cards below it.
      Shown only when userDataEmail is a no-reply@ placeholder.
    -->
    <div id="skynetEmailToggleWrapper" style="display:none;">
      <div class="skynet-email-toggle-bar">
        <span class="skynet-email-toggle-label">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" style="vertical-align:middle;margin-right:6px;">
            <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" fill="#420083"/>
          </svg>
          Please enter your email for further scanning reports.
        </span>
        <button id="skynetEmailToggleBtn" class="skynet-email-toggle-btn" type="button"
                onclick="window._skynetToggleEmailForm(event)">
          <span id="skynetEmailToggleBtnText">Add Email</span>
          <svg id="skynetEmailToggleArrow" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" style="margin-left:6px;transition:transform 0.25s;">
            <path d="M7 10l5 5 5-5H7z" fill="currentColor"/>
          </svg>
        </button>
      </div>

      <!-- Collapsible registration form -->
      <div id="skynetEmailFormPanel" class="skynet-email-form-panel" style="display:none;">
        <div class="skynet-email-form-inner">
          <h3 class="skynet-email-form-title">Register Your Details</h3>
          <div id="skynetEmailFormError" class="skynet-email-form-error" style="display:none;"></div>
          <div id="skynetEmailFormSuccess" class="skynet-email-form-success" style="display:none;"></div>
          <div class="skynet-email-form-row">
            <label class="skynet-email-form-label" for="skynetRegName">Full Name <span style="color:#e53e3e;">*</span></label>
            <input id="skynetRegName" class="skynet-email-form-input" type="text"
                   placeholder="Enter your full name" autocomplete="name" />
          </div>
          <div class="skynet-email-form-row">
            <label class="skynet-email-form-label" for="skynetRegEmail">Email Address <span style="color:#e53e3e;">*</span></label>
            <input id="skynetRegEmail" class="skynet-email-form-input" type="email"
                   placeholder="Enter your email address" autocomplete="email" />
          </div>
          <div class="skynet-email-form-actions">
            <button id="skynetRegSaveBtn" class="skynet-email-save-btn" type="button"
                    onclick="window._skynetSaveEmail(event)">
              <span id="skynetRegSaveBtnText">Save</span>
              <svg id="skynetRegSaveSpinner" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                   style="display:none;margin-left:8px;animation:skynet-spin 0.8s linear infinite;">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"
                        stroke-dasharray="31.4" stroke-dashoffset="10"/>
              </svg>
            </button>
            <button class="skynet-email-cancel-btn" type="button"
                    onclick="window._skynetToggleEmailForm(event)">Cancel</button>
          </div>
        </div>
      </div>
    </div>

    <!-- SECTION 1 — MAIN DASHBOARD -->
    <div id="skynetSection1" class="scans" style="display:none;">
      <h2 class="title">My Scans</h2>
      <section class="status">
        <div class="page-background"></div>
        <div class="status-card" id="skynetScanScoreCard" style="cursor:pointer;">
          <span class="status-title">Scan Score</span>
          <div class="status-value" id="skynetScanScoreValue"></div>
        </div>
        <div class="status-card">
          <span class="status-title">Last Scanned</span>
          <div class="status-value" id="skynetLastScannedValue"></div>
        </div>
      </section>
      <hr class="divider"/>

      <!-- FREE PLAN -->
      <section id="skynetPlanFree" class="plan" style="display:none;">
        <div class="page-background"></div>
        <div class="plan-info">
          <div class="plans-left">
            <div class="plan-type free">
              <div class="icon-circle">
                <img src="{% static 'wagtail_skynetaccessibility_scanner/img/assets/round.svg' %}" alt="Round" height="20" width="20"/>
              </div>
              <span id="skynetFreePlanName">Free Plan</span>
            </div>
            <div class="plan-desc"><ul><li id="skynetFreePlanPages">Scan up to 10 Pages</li></ul></div>
            <span class="plan-badge" id="skynetFreePlanBadge">Current Plan</span>
          </div>
          <div class="plans-right">
            <span class="plan-renewal" id="skynetFreeExpiry">Expires on: <strong>—</strong></span>
            <span class="cancel-btn" id="skynetFreeActivateBtn"
                  onclick="window._skynetBtnClick('free-activate', event)" style="cursor:pointer;">Activate Now</span>
          </div>
        </div>
      </section>

      <!-- ACTIVE PLAN -->
      <section id="skynetPlanActive" class="plan" style="display:none;">
        <div class="page-background"></div>
        <div class="plan-info">
          <div class="plans-left">
            <div class="plan-type">
              <div class="icon-circle">
                <img src="{% static 'wagtail_skynetaccessibility_scanner/img/assets/round.svg' %}" alt="Round" height="20" width="20"/>
              </div>
              <span id="skynetActivePlanName"></span>
            </div>
            <div class="plan-desc"><ul><li id="skynetActivePlanPages"></li></ul></div>
            <span class="plan-badge" id="skynetActivePlanBadge">Current Plan</span>
          </div>
          <div class="plans-right">
            <span class="plan-renewal" id="skynetActiveRenewal">Renews on: <strong>—</strong></span>
            <span class="cancel-btn" id="skynetCancelSubBtn"
                  onclick="window._skynetBtnClick('cancel-sub', event)" style="cursor:pointer;">Cancel Subscription</span>
          </div>
        </div>
      </section>

      <!-- EXPIRED PLAN -->
      <section id="skynetPlanExpired" class="plan" style="display:none;">
        <div class="page-background"></div>
        <div class="plan-info">
          <div class="plans-left">
            <div class="plan-type skynet-expired-title">
              <div class="icon-circle">
                <img src="{% static 'wagtail_skynetaccessibility_scanner/img/assets/round.svg' %}" alt="Round" height="20" width="20"/>
              </div>
              <span id="skynetExpiredTitle">Your Plan has Expired</span>
            </div>
          </div>
          <div class="plans-right">
            <span class="plan-renewal" id="skynetExpiredDate"></span>
            <span class="cancel-btn" id="skynetExpiredActivateBtn"
                  onclick="window._skynetBtnClick('expired-renew', event)"
                  style="background-color:#420083;color:#fff;cursor:pointer;">Renew Plan</span>
          </div>
        </div>
      </section>

      <!-- CANCELLED PLAN -->
      <section id="skynetPlanCancelled" class="plan" style="display:none;">
        <div class="page-background"></div>
        <div class="plan-info">
          <div class="plans-left">
            <div class="plan-type">
              <div class="icon-circle">
                <img src="{% static 'wagtail_skynetaccessibility_scanner/img/assets/round.svg' %}" alt="Round" height="20" width="20"/>
              </div>
              <span id="skynetCancelledPlanName"></span>
            </div>
            <div class="plan-desc"><ul><li id="skynetCancelledPlanPages"></li></ul></div>
            <span class="plan-badge skynet-badge-cancelled" id="skynetCancelledPlanBadge">Cancelled Plan</span>
          </div>
          <div class="plans-right">
            <span class="plan-renewal" id="skynetCancelledExpiry">Expires on: <strong>—</strong></span>
            <span class="cancel-btn" id="skynetRenewPlanBtn"
                  onclick="window._skynetBtnClick('cancelled-renew', event)"
                  style="background-color:#420083;color:#fff;cursor:pointer;">Renew Plan</span>
          </div>
        </div>
      </section>

      <!-- PRICING -->
      <section class="pricing">
        <div class="page-background"></div>
        <div class="billing-toggle">
          <span class="label active" id="monthly-label">Pay Monthly</span>
          <div class="switch">
            <div id="skynetBillingToggleWrapper"></div>
            <span class="slider" id="skynetBillingSlider"></span>
          </div>
          <span class="label" id="annual-label">Pay Annually</span>
          <span class="save">Save 20%</span>
        </div>
        <div id="skynetMonthlyTiers" class="pricing-tiers"></div>
        <div id="skynetAnnualTiers" class="pricing-tiers" style="display:none;"></div>
        <p class="pricing-contact">Are you looking for a custom plan or Enterprise plan? Contact us
          <a href="mailto:hello@skynettechnologies.com">hello@skynettechnologies.com</a></p>
      </section>

      <section class="help">
        <p class="help-text"><strong>Facing any issues with SkynetAccessibility Scanner?</strong> Report a problem, we will get back to you very soon!</p>
        <a href="https://www.skynettechnologies.com/report-accessibility-problem" target="_blank" class="help-btn" role="button">Report a problem</a>
      </section>
    </div><!-- end Section 1 -->

    <!-- SECTION 2 — WCAG VIOLATION REPORT -->
    <div id="skynetSection2" class="accessibility-report" style="display:none;">
      <div class="report-date">
        <span style="font-weight:500;">Report Date:</span>
        <span id="skynetS2ReportDate" style="border:1px solid #ccc;padding:8px 14px;border-radius:6px;font-weight:500;">—</span>
      </div><br/>
      <section class="top-section">
        <div class="card score-card">
          <h3>Accessibility Score</h3>
          <div class="accessibility-score">
            <div class="score-value" id="skynetS2ScoreValue">0%</div>
            <span class="status-text not-compliant" id="skynetS2StatusText">Not Compliant</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" id="skynetS2ScoreBar" style="width:0%;"></div>
          </div>
          <p class="note">Automated Accessibility score has limitations. We recommend Manual Accessibility Audit.</p>
        </div>
        <div class="card pages-card">
          <h3>Web Pages Scanned</h3>
          <div class="pages-value" id="skynetS2PagesValue">0</div>
          <div class="progress-bar">
            <div class="progress-fill" id="skynetS2PagesBar" style="width:0%;"></div>
          </div>
          <p class="note" id="skynetS2PagesNote">0 pages scanned out of 0</p>
        </div>
      </section><br/><br/>
      <section class="wcag-section">
        <div class="wcag-header">
          <h3>WCAG 2.1/2.2</h3>
          <span class="view-btn" id="skynetS2ViewViolationsBtn"
                onclick="window._skynetBtnClick('view-violations', event)" style="cursor:pointer;">
            View all Violations
            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none">
              <path d="M6 5.00002C6 5.17924 5.92797 5.35843 5.78422 5.49507L1.25832 9.79486C0.970413 10.0684 0.503627 10.0684 0.21584 9.79486C-0.0719468 9.52145 -0.0719468 9.07807 0.21584 8.80452L4.22061 5.00002L0.21598 1.19549C-0.0718073 0.921968 -0.0718073 0.478632 0.21598 0.205242C0.503767 -0.0684128 0.970553 -0.0684128 1.25846 0.205242L5.78436 4.50496C5.92814 4.64166 6 4.82086 6 5.00002Z" fill="white"/>
            </svg>
          </span>
        </div>
        <div class="checks-grid">
          <div class="check-card failed"><span class="check-value" id="skynetS2FailedChecks">0</span><span class="check-label">Failed Checks</span></div>
          <div class="check-card passed"><span class="check-value" id="skynetS2PassedChecks">0</span><span class="check-label">Passed Checks</span></div>
          <div class="check-card na"><span class="check-value" id="skynetS2NAChecks">0</span><span class="check-label">N/A Checks</span></div>
        </div>
        <hr class="divider"/>
        <div class="violations-grid">
          <div class="violation-card"><span class="violation-title">Level A</span><span class="violation-count"><span id="skynetS2LevelA">0</span> violations</span></div>
          <div class="violation-card"><span class="violation-title">Level AA</span><span class="violation-count"><span id="skynetS2LevelAA">0</span> violations</span></div>
          <div class="violation-card"><span class="violation-title">Level AAA</span><span class="violation-count"><span id="skynetS2LevelAAA">0</span> violations</span></div>
        </div>
      </section><br/><br/>
      <span class="back-btn" id="skynetBackBtn"
            onclick="window._skynetBtnClick('back', event)" style="cursor:pointer;">Back</span>
    </div><!-- end Section 2 -->

  </div><!-- end scanning-monitoring-app -->
</div><!-- end nice-padding -->
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
  // Pass server-side context to the JS bundle
  window.SKYNET_WEBSITE_ID = "{{ website_id|escapejs }}";
  window.SKYNET_DOMAIN     = "{{ domain|escapejs }}";
</script>
<script src="{% static 'wagtail_skynetaccessibility_scanner/js/skynet_scanner.js' %}"></script>
{% endblock %}