<?php
include("indexHeader.php");
?>

<!-- ============================================================
     LOGIN
     ============================================================ -->
<section class="afwc-login-page">

  <div class="afwc-login-shell">

    <!-- Left: Branding panel -->
    <div class="afwc-login-brand">
      <div class="afwc-login-brand-lines"></div>
      <div class="afwc-login-radar" aria-hidden="true">
        <div class="afwc-login-ring"></div>
        <div class="afwc-login-ring r2"></div>
        <div class="afwc-login-ring r3"></div>
        <div class="afwc-login-sweep"></div>
      </div>

      <div class="afwc-login-brand-content">
        <div class="afwc-login-crest">
          <img src="myAssets/images/afwcn_logo.png" alt="Air Force War College Nigeria logo">
        </div>
        <span class="eyebrow d-inline-flex">Secure Access Portal</span>
        <h1>Air Force War College<br>Nigeria</h1>
        <p>Authorized access to restricted doctrine publications, research repositories, and institutional systems reserved for enrolled participants and Directing Staff.</p>

        <div class="afwc-login-brand-features">
          <div class="afwc-login-feature"><i class="bi bi-shield-lock-fill"></i><span>Encrypted, secure sign-in</span></div>
          <div class="afwc-login-feature"><i class="bi bi-journal-lock"></i><span>Access restricted doctrine &amp; research</span></div>
          <div class="afwc-login-feature"><i class="bi bi-mortarboard-fill"></i><span>Track your War Course progress</span></div>
        </div>

        <div class="afwc-login-coords">09&deg;04&prime;N&nbsp; 07&deg;28&prime;E &mdash; NAF BASE, MAKURDI</div>
      </div>
    </div>

    <!-- Right: Login form panel -->
    <div class="afwc-login-form-panel">
      <div class="afwc-login-form-wrap">

        <a href="index" class="afwc-login-back"><i class="bi bi-arrow-left me-2"></i>Back to Website</a>

        <div class="afwc-login-role-tabs" role="tablist" aria-label="Login role">
          <button class="afwc-login-role-tab active" data-role="participant" role="tab" aria-selected="true">
            <i class="bi bi-mortarboard-fill"></i> Participant
          </button>
          <button class="afwc-login-role-tab" data-role="staff" role="tab" aria-selected="false">
            <i class="bi bi-person-badge-fill"></i> Staff
          </button>
          <button class="afwc-login-role-tab" data-role="admin" role="tab" aria-selected="false">
            <i class="bi bi-shield-lock-fill"></i> Administrator
          </button>
        </div>

        <div class="afwc-login-heading">
          <h2 id="afwcLoginHeading">Participant Login</h2>
          <p id="afwcLoginSubheading">Access your course materials, syndicate resources and Fellowship records.</p>
        </div>

        <form id="afwcLoginForm" novalidate>
          <input type="hidden" id="afwcLoginRole" value="participant">

          <div class="afwc-login-field">
            <label for="afwcLoginId">Username or Service Number <span>*</span></label>
            <div class="afwc-login-input-wrap">
              <i class="bi bi-person-fill"></i>
              <input type="text" id="afwcLoginId" name="loginId" placeholder="e.g. AFWC/2026/0142" required>
            </div>
            <span class="afwc-login-error" id="afwcLoginIdError">Please enter your username or service number.</span>
          </div>

          <div class="afwc-login-field">
            <label for="afwcLoginPassword">Password <span>*</span></label>
            <div class="afwc-login-input-wrap">
              <i class="bi bi-lock-fill"></i>
              <input type="password" id="afwcLoginPassword" name="password" placeholder="Enter your password" required>
              <button type="button" class="afwc-login-toggle-pw" id="afwcTogglePw" aria-label="Show password">
                <i class="bi bi-eye"></i>
              </button>
            </div>
            <span class="afwc-login-error" id="afwcLoginPasswordError">Please enter your password.</span>
          </div>

          <div class="afwc-login-row-between">
            <label class="afwc-login-checkbox">
              <input type="checkbox" id="afwcRememberMe">
              <span>Remember me</span>
            </label>
            <a href="#" class="afwc-login-forgot">Forgot Password?</a>
          </div>

          <button type="submit" class="afwc-login-submit">
            <span class="afwc-login-submit-text"><i class="bi bi-box-arrow-in-right me-2"></i>Sign In</span>
            <span class="afwc-login-submit-loading d-none"><i class="bi bi-arrow-repeat me-2"></i>Signing in&hellip;</span>
          </button>

          <div class="afwc-login-alert afwc-login-alert-error d-none" id="afwcLoginErrorAlert">
            <i class="bi bi-exclamation-triangle-fill"></i>
            <span>Invalid credentials. Please check your details and try again.</span>
          </div>

          <div class="afwc-login-alert afwc-login-alert-success d-none" id="afwcLoginSuccessAlert">
            <i class="bi bi-check-circle-fill"></i>
            <span>Signed in successfully. Redirecting&hellip;</span>
          </div>
        </form>

        <div class="afwc-login-divider"><span>Need Assistance?</span></div>

        <div class="afwc-login-help">
          <a href="mailto:afwc@airforce.mil.ng"><i class="bi bi-envelope-fill"></i> afwc@airforce.mil.ng</a>
          <a href="tel:+2349087069070"><i class="bi bi-telephone-fill"></i> 09087069070</a>
        </div>

        <p class="afwc-login-footnote"><i class="bi bi-shield-check me-1"></i> This is a restricted system. Unauthorized access is prohibited and may be subject to disciplinary and/or legal action.</p>

      </div>
    </div>

  </div>
</section>

<?php
include("indexFooter.php");
?>