{% 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 Self Service Kiosk ! 👋</h4>
              <p class="mb-4">Please enter your request id 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{% 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 method="POST" autocomplete="off" id="formAuthentication">
                            {% csrf_token %}
                <div class="mb-3">
                  <input type="text" class="form-control mb-3 mt-3" id="request_id" name="request_id" placeholder="Request ID (Appointment ID)" required value="{{ request_id|default:'' }}" {% if show_name_fields %}readonly style="background-color: #e9ecef;"{% endif %}/>
                  {% if show_name_fields %}
                    <input type="text" class="form-control mb-3 mt-3" name="first_name" placeholder="First Name" required />
                    <input type="text" class="form-control mb-3 mt-3" name="last_name" placeholder="Last Name" required />
                    <input type="email" class="form-control mb-3 mt-3" name="email" placeholder="Email Address" required />
                    <input type="tel" class="form-control mb-3 mt-3" name="phone" placeholder="Phone Number" pattern="[0-9]{10}" required />
                    <input type="password" class="form-control mb-3 mt-3" name="password" placeholder="Password" required />
                 {% endif %}
                </div>
                <div class="mb-3">
                    <button class="btn btn-primary d-grid w-100" type="submit">Submit</button>
                </div>        
                <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">
                  <span class="text-muted">Want to return?</span>
                  <a href="{% url 'gate_keeper' %}" class="text-primary">
                    Back to Login
                  </a>
                </p>
            </form>
            
          </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>