{% 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{% 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 %}
                <input type="hidden" name="user_type" value="{{ function_name }}">
                <div class="mb-3">
                    <input type="text" name="first_name" placeholder="First Name" class="form-control" required />
                </div>        
                <div class="mb-3">
                    <input type="text" name="last_name" placeholder="Last Name" class="form-control" required />
                </div>    
                <div class="mb-3">        
                    <input type="email" name="email" placeholder="Email Address" class="form-control" required />
                </div>        
                <div class="mb-3">        
                    <input type="password" name="Password" placeholder="Password" class="form-control" required />
                </div>        
                <div class="mb-3">        
                    <input type="password" name="Confirm_Password" placeholder="Confirm Password" class="form-control" required />
                </div>    
                <div id="error" style="color: red; display: none;">Passwords do not match!</div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-primary d-grid w-100">SIGN UP</button>
                </div>
                <p class="text-center">
                  <span class="text-muted">Visitor on our platform? </span>
                  <a href="{% url 'visitors' %}" class="common-btn">LOG IN</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>
          </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>