{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block base %}
<div class="row">
    <div class="col-sm-12 col-lg-3"></div>
    <div class="col-sm-12 col-lg-6">
        <nav aria-label="breadcrumb" class="mt-2 px-3">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">User Registration</li>
          </ol>
        </nav>
        <div class="m-1 p-2">
        <h3 style="background-color:#0c031a; color:white;" class="my-3 p-3 text-center">REGISTER NEW USER...</h3>
        <form method="post" action="{% url 'register' %}" id="formPage">
            {% csrf_token %}
                    {{form|crispy}}
                    {{form_profile|crispy}}
                <button type="submit" class="btn mt-3 form-control" id="submitBtn" style="background-color: #0c031a;color:white;">REGISTER</button>
            </form>
            
            <h5 class="mt-3"><u>NB</u></h5>
            * <small>User can submit = Shift Head or Coordinator</small><br/>
            * <small>User can unit head check = Unit Head Checks</small><br/>
            * <small>User can approve = Lab Manager or Quality Assurance Manager</small>
        </div>
    </div>
    <div class="col-sm-12 col-lg-3"></div>
    <br/><br/><br/>
</div>
<h1>&nbsp;</h1>
    <script>
        document.getElementById("formPage").onsubmit = function() {
                    document.getElementById("submitBtn").disabled = true;
                    document.getElementById("submitBtn").innerText = 'REGISTERING';
                }
    </script>
{% endblock %}