{% include 'registration/header.html' %}
{% load static %}

<div class="container-xxl">
  <div class="authentication-wrapper authentication-basic container-p-y">
    <div class="authentication-inner">
      <!-- Login / Reset Form Card -->
      <div class="card">
        <div class="card-body">
          <!-- Logo -->
          <div class="app-brand justify-content-center">
            <a href="">
              <span class="app-brand-logo demo">
                {% if GET_PASS_IMAGE %}
                  <img src="{% static GET_PASS_IMAGE %}" class="com-logo" style="width:100%">
                {% endif %}
              </span>
            </a>
          </div>
          <!-- /Logo -->

          <h4 class="mb-2">Welcome to {{ function_name }}!</h4>
          <p class="mb-4">{% if is_password_reset %} Enter your registered email address and we’ll send you instructions to reset it. {% else %} Please sign-in to your account and start the adventure {% endif %}</p>

          <!-- Messages -->
          <div style="padding: 10px;">
            {% if messages %}
              {% for message in messages %}
                <div class="alert
                    {% if 'success' in message.tags %}alert-success alert-dismissible
                    {% elif 'danger' in message.tags %}alert-danger alert-dismissible
                    {% elif 'warning' in message.tags %}alert-warning alert-dismissible
                    {% elif 'info' in message.tags %}alert-info alert-dismissible
                    {% endif %}" role="alert" id="success-alert">
                  {{ message }}
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              {% endfor %}
            {% endif %}
          </div>

          <!-- Form -->
          <form id="formAuthentication" class="mb-3" method="POST">
            {% csrf_token %}

            {% if is_password_reset %}
              <!-- Only Employee Code Field -->
              <div class="mb-3">
                <label for="email" class="form-label">Email Address</label>
                <input type="email" class="form-control" name="email" placeholder="Enter your email address" autofocus required/>
              </div>

            {% else %}
              <!-- Normal Login Fields -->
              {% if function_name == 'Visitors' %}
                <div class="mb-3">
                  <label for="email" class="form-label">Email or Username</label>
                  <input type="text" class="form-control" id="email" name="email" placeholder="Enter your email or username" autofocus />
                </div>

              {% else %}
                <div class="mb-3">
                  <label for="employee_code" class="form-label">Employee Code</label>
                  <input type="text" class="form-control" id="employee_code" name="employee_code" placeholder="Enter your employee code" autofocus />
                </div>
              {% endif %}

              <div class="mb-3 form-password-toggle">
                <div class="d-flex justify-content-between">
                  <label class="form-label" for="password">Password</label>
                </div>
                <div class="input-group input-group-merge">
                  <input type="password" id="password" class="form-control" name="password" placeholder="Password" aria-describedby="password" />
                  <span class="input-group-text cursor-pointer toggle-password" data-target="#password">
                    <!-- <i class="bx bx-hide"></i> -->
                  </span>
                </div>
              </div>
            {% endif %}

            <div class="mb-3">
              <button class="btn btn-primary d-grid w-100" type="submit">
                {% if is_password_reset %} Continue {% else %} Sign in {% endif %}
              </button>
            </div>
            {% if is_password_reset %}
              <p class="text-center">
                  <a href="{% url 'gate_keeper' %}" class="text-secondary">Back to Login</a>
              </p>
            {% endif %}
          </form>

          <!-- Footer Links -->
          {% if not is_password_reset %}
            {% if function_name == 'Gate Keeper' %}
              <p class="text-center">
                <span class="text-muted">Admin on our platform? </span>
                <a href="{% url 'admin' %}" class="text-primary">Admin Login</a>
              </p>
              <p class="text-center">
                <span class="text-muted">Employee on our platform? </span>
                <a href="{% url 'employee' %}" class="text-primary">Employee Login</a>
              </p>
            {% elif function_name == 'Employee' %}
              <p class="text-center">
                <span class="text-muted">Gate Keeper on our platform? </span>
                <a href="{% url 'gate_keeper' %}" class="text-primary">Gate Keeper Login</a>
              </p>
              <p class="text-center">
                <span class="text-muted">Admin on our platform? </span>
                <a href="{% url 'admin' %}" class="text-primary">Admin Login</a>
              </p>
            {% elif function_name == 'Admin' %}
              <p class="text-center">
                <span class="text-muted">Gate Keeper on our platform? </span>
                <a href="{% url 'gate_keeper' %}" class="text-primary">Gate Keeper Login</a>
              </p>
              <p class="text-center">
                <span class="text-muted">Employee on our platform? </span>
                <a href="{% url 'employee' %}" class="text-primary">Employee Login</a>
              </p>
            {% elif function_name == 'Visitors' %}
              <p class="text-center">
                <span class="text-muted">Visitor Signup on our platform? </span>
                <a href="{% url 'visitors_sign_up' %}" class="text-primary" id="showSignup">Signup</a>
              </p>
              <p class="text-center">
                <a href="{% url 'gate_keeper' %}" class="text-secondary">Back to Login</a>
              </p>
            {% endif %}

            {% if setting.safety_Service_Kiosk %}
              <p class="text-center">
                <span class="text-muted">Want to access Self Service Kiosk? </span>
                <a href="{% url 'visitors_self_safety_training' %}" class="text-primary">Self Service Kiosk</a>
              </p>
            {% endif %}

            <p class="text-center">
              <span class="text-muted">Forgot your password? </span>
              <a href="{% url 'password_reset' %}" class="text-primary">Forgot Password</a>
            </p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JS -->
<script src="{% static '/assets/vendor/libs/jquery/jquery.js'%}"></script>
<script src="{% static '/assets/vendor/libs/popper/popper.js'%}"></script>
<script src="{% static '/assets/vendor/js/bootstrap.js'%}"></script>
<script src="{% static '/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js'%}"></script>
<script src="{% static '/assets/vendor/js/menu.js'%}"></script>
<script src="{% static '/assets/vendor/libs/apex-charts/apexcharts.js'%}"></script>
<script src="{% static '/assets/js/main.js'%}"></script>
<script src="{% static '/assets/js/dashboards-analytics.js'%}"></script>