{% extends "base.html" %}

{% from "components/icon.html" import Icon %}
{% from "components/alert.html" import Alert %}

{% block content %}

<article class='col col--grow request-approval'>

  <form>
    <section class='panel'>
      <header class='panel__heading request-approval__heading'>
        <h1 class='h2'>Request #{{ request_id }}</h1>
        <span class='label label--info'>{{ status }}</span>
      </header>

      <div class='panel__content'>

        <p>
          {% if data["details_of_use"] and data["details_of_use"]["jedi_usage"] %}
            {{ data["details_of_use"]["jedi_usage"] }}
          {% else %}
            <i>Missing usage information</i>
          {% endif %}
        </p>

        {% with data=data, request_id=request_id %}
          {% include "requests/_review.html" %}
        {% endwith %}

      </div>

    </section>

    <section class='panel'>
      <header class='panel__heading'>
        <h2 class='h3'>Approval Notes</h2>
      </header>

      <div class='panel__content'>

        <div class="form__sub-fields">

          <h3>Instructions for the Requestor</h3>

          Provide instructions or notes for additional information that is necessary to approve the request here. The requestor may then re-submit the updated request or initiate contact outside of AT-AT if further discussion is required. <b>These notes will be visible to the person making the JEDI request</b>.

          <div class='usa-input'>
            <label for='notes'>Comments <em>(optional)</em></label>
            <textarea id='notes' placeholder='Add notes or comments explaining what changes are being requested or why further discussion is needed about this request.'/></textarea>
          </div>


        </div>

        <div class="form-row">
          <div class="form-col">
            <h3>Authorizing Officials</h3>
            <p>This section is not visible to the person making the request. It is only viewable by CCPO staff.</p>
            <p>Provide the name of the key officials for both parties that have authorized this request to move forward.</p>

          </div>
        </div>
        <h4 class="h3">Mission Authorizing Official</h4>

        <div class='form-row'>

          <div class='form-col form-col--half'>

            <div class='usa-input'>
              <label for='mo-behalf-fname'>First Name</label>
              <input id='mo-behalf-fname' type='text' placeholder='First name of mission authorizing official' />
            </div>

          </div>

          <div class='form-col form-col--half'>

            <div class='usa-input'>
              <label for='mo-behalf-lname'>Last Name</label>
              <input id='mo-behalf-lname' type='text' placeholder='Last name of mission authorizing official'/>
            </div>

          </div>

        </div>

        <div class='form-row'>

          <div class='form-col form-col--half'>


            <div class='usa-input'>
              <label for='mo-behalf-email'>Mission Owner e-mail (optional)</label>
              <input id='mo-behalf-email' type='email' placeholder='name@mail.mil'/>
            </div>

          </div>


          <div class='form-col form-col--half'>

            <div class='usa-input'>
              <label for='mo-behalf-phone'>Mission Owner phone number (optional)</label>
              <input id='mo-behalf-phone' type='tel' placeholder='(123) 456-7890'/>
            </div>

          </div>

        </div>


        <h4 class="h3">CCPO Authorizing Official</h4>

        <div class='form-row'>

          <div class='form-col form-col--half'>

            <div class='usa-input'>
              <label for='ccpo-behalf-fname'>First Name</label>
              <input id='ccpo-behalf-fname' type='text' placeholder='First name of CCPO authorizing official' />
            </div>

          </div>

          <div class='form-col form-col--half'>

            <div class='usa-input'>
              <label for='ccpo-behalf-lname'>Last Name</label>
              <input id='ccpo-behalf-lname' type='text' placeholder='Last name of CCPO authorizing official'/>
            </div>

          </div>

        </div>



        <h4 class="h3">CCPO Internal Notes</h4>

        <p>You may add additional comments and notes for internal CCPO reference and follow-up here.</p>

        <div class='form-row'>

          <div class='form-col'>

            <div class='usa-input'>
              <label for='notes'>Internal Comments <em>(optional)</em></label>
              <textarea id='notes' placeholder='Add notes or comments for internal CCPO reference.'/></textarea>
            </div>

          </div>

        </div>

      </div>

    </section>

    <section class='action-group'>
      <a href='#' class='usa-button usa-button-big'>Approve Request</a>
      <a href='#' class='usa-button usa-button-big usa-button-secondary'>Mark as Changes Requested</a>
      <a href='#' class='icon-link'>
        {{ Icon('x') }}
        <span>Cancel</span>
      </a>
    </section>

    <section class='panel'>
      <header class='panel__heading'>
        <h2 class='h3 request-approval__columns__heading'>Approval Log</h2>
      </header>
      <div>
        <div class='approval-log'>
          <ol>
            <li>
              <article class='approval-log__log-item'>
                <div>
                  <h3 class='approval-log__log-item__header'>Denied by Darth Vader</h3>
                  <p>"You have failed me for the last time, Admiral. Captain Piett. Yes, my lord. Make ready to land out troops beyond the energy shield and deploy the fleet so that nothing gets off that system."</p>

                  <div class='approval-log__behalfs'>
                    <div class='approval-log__behalf'>
                      <h3 class='approval-log__log-item__header'>Mission Owner approval on behalf of:</h3>
                      <span>Grand Moff Tarkin</span>
                      <span>tarkin@empire.mil</span>
                      <span>(234) 567-8901</span>
                    </div>

                    <div class='approval-log__behalf'>
                      <h3 class='approval-log__log-item__header'>CCPO approval on behalf of:</h3>
                      <span>Emperor Palpatine</span>
                      <span>palpatine@empire.mil</span>
                      <span>(345) 678-9012</span>
                    </div>
                  </div>
                </div>

                <footer class='approval-log__log-item__timestamp'><time datetime='2018-07-02 04:23:02 EST'>2018-07-02 04:23:02 EST</time></footer>
              </article>
            </li>


            <li>
              <article class='approval-log__log-item'>
                <div>
                  <h3 class='approval-log__log-item__header'>Denied by Darth Vader</h3>
                  <p>"You have failed me for the last time, Admiral. Captain Piett. Yes, my lord. Make ready to land out troops beyond the energy shield and deploy the fleet so that nothing gets off that system."</p>

                  <div class='approval-log__behalfs'>
                    <div class='approval-log__behalf'>
                      <h3 class='approval-log__log-item__header'>Mission Owner approval on behalf of:</h3>
                      <span>Grand Moff Tarkin</span>
                      <span>tarkin@empire.mil</span>
                      <span>(234) 567-8901</span>
                    </div>

                    <div class='approval-log__behalf'>
                      <h3 class='approval-log__log-item__header'>CCPO approval on behalf of:</h3>
                      <span>Emperor Palpatine</span>
                      <span>palpatine@empire.mil</span>
                      <span>(345) 678-9012</span>
                    </div>
                  </div>
                </div>

                <footer class='approval-log__log-item__timestamp'><time datetime='2018-07-02 04:23:02 EST'>2018-07-02 04:23:02 EST</time></footer>
              </article>
            </li>
          </ol>
        </div>
      </div>
    </section>

  </form>
</article>

{% endblock %}