{% extends 'layouts/base.html' %}

{% block title %} GPU Booking {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

  <main class="main-content mt-0"></main>

    <section class="min-vh-100 mb-8">
      <div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('{{ ASSETS_ROOT }}/img/shutterstock/shutterstock_1941321493.jpg');">
        <span class="mask bg-gradient-dark opacity-6"></span>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-5 text-center mx-auto">
              <h1 class="text-white mb-2 mt-5">GPU Booking System</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row mt-lg-n10 mt-md-n11 mt-n10">
          <div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
            <div class="card z-index-0">

              <div class="card-header text-center pt-4">
                <h5>Register a New GPU Booking</h5>
              </div>

              <div class="row px-xl-5 px-sm-4 px-3">
                
                <div class="mt-2 position-relative text-center">
                </div>

              </div>

              <div class="card-body">

                {% if success %} 
                
                  <p class="text-sm mt-3 mb-0 text-center"> 
                    <div class="text-center">
                      <a href="{% url 'login' %}" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign IN</a>
                    </div> 
                  </p>

                {% else %}

                  <form role="form text-left" method="post" action="" enctype="multipart/form-data">

                      {% csrf_token %}

                      <div class="mb-3">
                        <label>Project Name</label>
                        {{ form.namespace }}
                        <span class="text-danger">{{ form.namespace.errors }}</span>
                      </div>

                        <div class="mb-3">
                        <label>Email</label>
                        {{ form.user_email }}
                        <span class="text-danger">{{ form.email.errors }}</span>
                        </div>

                      <div class="mb-3">
                        <label>GPU Request</label>
                        {{ form.gpu }}
                        <span class="text-danger">{{ form.gpu.errors }}</span>
                      </div>

                      <div class="mb-3">
                        <label>Booking GPU from</label>
                        {{ form.start_date }}
                        <span class="text-danger">{{ form.start_date.errors }}</span>
                      </div>
                      

                      
                  

                      <div class="mb-3">
                        <label>Booking GPU until</label>
                        {{ form.end_date }}
                        <span class="text-danger">{{ form.end_date.errors }}</span>

                      <div class="text-center">
                        <button type="submit" name="register" class="btn bg-gradient-dark w-100 my-4 mb-2">Request GPU Booking</button>
                      </div>

                  </form>

                {% endif %}

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {% include "includes/footer-fullscreen.html" %}

  </main>

{% endblock content %}

<!-- Specific JS goes HERE --> 
{% block javascripts %}{% endblock javascripts %}