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

<div class="container-xxl">
      <div class="authentication-wrapper authentication-basic container-p-y">
        <div class="authentication-inner">
          <!-- Register -->
          <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%">
                        {% else %}

                    {% endif %}

                  </span>
                </a>
              </div>
              <!-- /Logo -->
              <h4 class="mb-2">Welcome to {{function_name}}!</h4>
              <p class="mb-4">Please sign-in to your account and start the adventure</p>
              <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 id="formAuthentication" class="mb-3"  method="POST">
                {% csrf_token %}
                {% 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="email" class="form-label">Email or Username</label>
                  <input
                    type="text"
                    class="form-control"
                    id="email"
                    name="employee_code"
                    placeholder="Enter your email or username"
                    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>
                
                <div class="mb-3">
                  <button class="btn btn-primary d-grid w-100" type="submit">Sign in</button>
                </div>
              </form>


            {% 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>
                {% 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 %}
            {% 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>
                {% 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 %}
              {% 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>
                {% 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 %}
              {% 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 %}
            </div>
          </div>
          <!-- /Register -->
        </div>
      </div>
</div>

<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>
    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="{% static '/assets/vendor/libs/apex-charts/apexcharts.js'%}"></script>

    <!-- Main JS -->
    <script src="{% static '/assets/js/main.js'%}"></script>

    <!-- Page JS -->
    <script src="{% static '/assets/js/dashboards-analytics.js'%}"></script>