{% extends 'dashboard/base.html' %}
{% block title %}Create a New Request{% endblock %}
{% block request_active %}active{% endblock %}

{%  block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-7">
                <div class="panel panel-default">
                    <div class="panel-body">

                      <!-- Tabular Category of questions in the form-->
                      <ul class="nav nav-pills">
                        <li class="active"><a data-toggle="pill" href="#category1">Category 1</a></li>
                        <li><a data-toggle="pill" href="#category2">Category 2</a></li>
                        <li><a data-toggle="pill" href="#category3">Category 3</a></li>
                        <li><a data-toggle="pill" href="#category4">Category 4</a></li>
                      </ul>

                      <div class="tab-content">
                        <div id="category1" class="tab-pane fade in active">
                          <h3>Category One Title</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                          <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
{#                            {% include 'dashboard/form-template.html' %}#}
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="title">Request Title</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="title" placeholder="Enter Request Title">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="description">Request Description</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="description" placeholder="Enter Request Description">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="allocation-type">Allocation Type</label>
                                <div class="col-sm-10">
                                  <div class="dropdown">
                                      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Allocation
                                      <span class="caret"></span></button>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">Community</a></li>
                                        <li><a href="#">Campus</a></li>
                                        <li><a href="#">External</a></li>
                                      </ul>
                                  </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="apps">Applications to be used</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="apps" placeholder="Enter Applications">
                                </div>
                            </div>
                            <div class="form-group">
                                <ul class="pager">
                                  <li><a href="#">Next</a></li>
                                </ul>
                            </div>
                          </form>
                        </div>
                        <div id="category2" class="tab-pane fade">
                          <h3>Category Two</h3>
                          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                          <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
{#                            {% include 'dashboard/form-template.html' %}#}
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="disk-usage">Disk usage range per job</label>
                                <div class="col-sm-10">
                                  <input type="range" min="0" max="100" class="form-control" id="disk-usage" placeholder="Enter Disk Usage per Job">
                                </div>
                            </div>
                            <!-- Search for how to upload documents using bootstrap -->
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="documents">Upload</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="documents" placeholder="Upload Relevant Documents">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="science-field">Field of Science</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="science-field" placeholder="Enter Field of Science">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="keywords">Keywords</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="keywords" placeholder="Enter Keywords">
                                </div>
                            </div>
                            <div class="form-group">
                                <ul class="pager">
                                  <li><a href="#">Previous</a></li>
                                  <li><a href="#">Next</a></li>
                                </ul>
                            </div>
                          </form>
                        </div>
                        <div id="category3" class="tab-pane fade">
                          <h3>Category Three</h3>
                          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                          <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
{#                            {% include 'dashboard/form-template.html' %}#}
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="memory-cpu">Max Memory per CPU</label>
                                <div class="col-sm-10">
                                  <input type="number" class="form-control" id="memory-cpu" placeholder="Enter Max Memory per CPU">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="cpu-per-job">Number of CPUs per job</label>
                                <div class="col-sm-10">
                                  <input type="number" class="form-control" id="cpu-per-job" placeholder="Enter Number of CPUs per job">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="request-date">Request Date</label>
                                <div class="col-sm-10">
                                  <input type="date" class="form-control" id="request-date" placeholder="Select a Date">
                                </div>
                            </div>
                            <div class="form-group">
                                <ul class="pager">
                                  <li><a href="#">Previous</a></li>
                                  <li><a href="#">Next</a></li>
                                </ul>
                            </div>
                          </form>
                        </div>
                        <div id="category4" class="tab-pane fade">
                          <h3>Category Four</h3>
                          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                          <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
{#                            {% include 'dashboard/form-template.html' %}#}
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="service-units">Service Units</label>
                                <div class="col-sm-10">
                                  <input type="number" class="form-control" id="service-units" placeholder="Enter Service Units">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="resource-selection">Specific Resource Selection</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="resource-selection" placeholder="Specific Resource Selection">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="typical-su">Typical SU per Job</label>
                                <div class="col-sm-10">
                                  <input type="number" class="form-control" id="typical-su" placeholder="Enter Typical SU per Job">
                                </div>
                            </div>
                            <div class="form-group">
                                <ul class="pager">
                                  <li><a href="#">Previous</a></li>
                                  <li><a href="#">Next</a></li>
                                </ul>
                            </div>
                            <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
{#                            {% include 'dashboard/form-template.html' %}#}
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </div>
                        </form>
                          </form>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}