{% 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">General Description</a></li>
                        <li><a data-toggle="pill" href="#category2">Typical Job Description</a></li>
                        <li><a data-toggle="pill" href="#category3">Resource Description</a></li>
                        <li><a data-toggle="pill" href="#category4">Additional Details</a></li>
                      </ul>

                      <div class="tab-content">
                        <div id="category1" class="tab-pane fade in active">
                          <h3></h3>
{#                          <p>Please provi</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">
{#                                  <PLACEHOLDER options #}
                                    <select class="selectpicker" data-style="btn-primary" data-live-search="true" multiple>
                                         <optgroup label="Web">
                                            <option>PHP</option>
                                            <option>CSS</option>
                                            <option>HTML</option>
                                            <option>CSS 3</option>
                                            <option>Bootstrap</option>
                                            <option>JavaScript</option>
                                        </optgroup>
                                        <optgroup label="Programming">
                                          <option>Java</option>
                                          <option>C#</option>
                                          <option>Python</option>
                                        </optgroup>
                                    </select>
{#                                    <input type="text" class="form-control "placeholder="Other">#}
                                </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" id="keywords" placeholder="Keywords">
                                </div>
                            </div>
                            <div class="form-group">
                                <ul class="pager">
                                  <li class="next"><a href="#category2">Next</a></li>
                                </ul>
                            </div>
                          </form>
                        </div>
                        <div id="category2" class="tab-pane fade">
                          <h3></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="slider" id="disk-usage" placeholder="Enter Disk Usage per Job">
                                </div>
                            </div>
                            <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" min="0" 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" min="0" 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="typical-su">Typical SU per Job</label>
                                <div class="col-sm-10">
                                  <input type="number" min="0" class="form-control" id="typical-su" placeholder="Enter Typical SU per Job">
                                </div>
                            </div>
                            <div class="form-group">
                                <ul class="pager">
                                  <li class="previous"><a href="#">Previous</a></li>
                                  <li class="next"><a href="#">Next</a></li>
                                </ul>
                            </div>
                          </form>
                        </div>
                        <div id="category3" class="tab-pane fade">
                          <h3></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="allocation">Total Allocation Requested</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="allocation" placeholder="Enter Requested Allocation">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="specific-resources">Specific Resources</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="specific-resources" placeholder="Enter Specific Resources">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="apps">Resource Type</label>
                                <div class="col-sm-10">
{#                                  <PLACEHOLDER options #}
                                    <select class="selectpicker" data-style="btn-primary" data-live-search="true">
                                      <option>On-Demand</option>
                                      <option>Large Memory</option>
                                      <option>GPUs</option>
                                     </select>
{#                                    <input type="text" class="form-control "placeholder="Other">#}
                                </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></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="comments">Additional Comments</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control" id="comments" placeholder="Enter Additional Comments">
                                </div>
                            </div>
                            <div class="form-group">
                                 <label class="control-label col-sm-2" for="upload-file">Relevant Documents</label>
                                 <div class="col-sm-10">
                                    <input id="upload-file" type="file" class="file" data-preview-file-type="text">
                                 </div>
                            </div>

                            <div class="form-group">
                                <ul class="pager">
                                  <li class="previous"><a href="#">Previous</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 %}