{% extends "base.html" %}

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

{% block content %}

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

{% if review_form.errors or internal_comment_form.errors %}
  {{ Alert('There were some errors',
    message="<p>Please see below.</p>",
    level='error'
  ) }}
{% endif %}

    <section class='panel'>
      <header class='panel__heading panel__heading--divider request-approval__heading'>
        <h1 class='h2'>Request: {{ jedi_request.displayname }}
        </h1>
        <span class='label label--info'>{{ current_status }}</span>
      </header>

      <div class='panel__content'>

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

      </div>

    </section>

    <section class='internal-notes' id='ccpo-notes'>
      <form method="POST" action="{{ url_for('requests.create_internal_comment', request_id=jedi_request.id) }}">
        <div class='panel'>
          <div class='panel__heading panel__heading--divider'>
            <h2>CCPO Internal Comments</h2>
          </div>

          <div class='comment-log'>
            {% if comments %}
            <ol>
              {% for comment in comments %}
                <li>
                  <article class='comment-log__log-item'>
                    <div>
                      <h3 class='comment-log__log-item__header'>{{ comment.user.full_name }}</h3>
                      <p>{{ comment.text }}</p>
                    </div>
                    {% set timestamp=comment.time_created | formattedDate("%Y-%m-%d %H:%M:%S %Z") %}
                    <footer class='comment-log__log-item__timestamp'>
                      <local-datetime timestamp='{{ timestamp }}'></local-datetime>
                    </footer>
                  </article>
                </li>
              {% endfor %}
            </ol>
            {% else %}
              <div class='panel__content'>
                <p class='h4'>No CCPO comments have been recorded yet.</p>
              </div>
            {% endif %}

          </div>

          <div class='panel__heading internal-notes__add-comment__heading'>
            <h3 class='h3'>Add a comment</h2>
          </div>

          <div class='panel__content'>
            {{ internal_comment_form.csrf_token }}
            {{ TextInput(internal_comment_form.text, paragraph=True, noMaxWidth=True) }}
          </div>
        </div>
         <div class='action-group action-group--tight'>
          <button class='usa-button' type="submit">Save Notes</button>
        </div>
      </form>
    </section>


    <section class='request-approval__review'>
      <form method="POST" action="{{ url_for("requests.submit_approval", request_id=jedi_request.id) }}" autocomplete="off">
        {{ review_form.csrf_token }}

        {% set initialState = 'approving' if review_form.errors else '' %}
        <ccpo-approval inline-template initial-state="{{ initialState }}">
          <div>
            <div class='panel'>

              <header class='panel__heading panel__heading--divider'>
                <h2 class='request-approval__columns__heading'>CCPO Review Activity</h2>
              </header>

              <div class='approval-log'>
                {% if reviews %}
                <ol>
                  {% for review in reviews %}
                    <li>
                      <article class='approval-log__log-item'>
                        <div>
                          {{ review.log_name }}
                          <h3 class='approval-log__log-item__header'>{{ review.status.log_name }} by {{ review.full_name_reviewer }}</h3>
                          {% if review.comment %}
                            <p>{{ review.comment }}</p>
                          {% endif %}

                          <div class='approval-log__behalfs'>
                            {% if review.lname_mao %}
                              <div class='approval-log__behalf'>
                                <h3 class='approval-log__log-item__header'>Mission Owner approval on behalf of:</h3>
                                <span>{{ review.full_name_mao }}</span>
                                <span>{{ review.email_mao }}</span>
                                <span>{{ review.phone_mao }}</span>
                              </div>
                            {% endif %}

                            {% if review.lname_ccpo %}
                              <div class='approval-log__behalf'>
                                <h3 class='approval-log__log-item__header'>CCPO approval on behalf of:</h3>
                                <span>{{ review.full_name_ccpo }}</span>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                        {% set timestamp=review.status.time_created | formattedDate("%Y-%m-%d %H:%M:%S %Z") %}
                        <footer class='approval-log__log-item__timestamp'>
                          <local-datetime timestamp='{{ timestamp }}'></local-datetime>
                        </footer>
                      </article>
                    </li>
                  {% endfor %}
                </ol>
                {% else %}
                  <div class='panel__content'>
                    <p class='h4'>No CCPO approvals or request changes have been recorded yet.</p>
                  </div>
                {% endif %}
              </div>

              {% if jedi_request.is_pending_ccpo_action %}
              <div class='panel__heading request-approval__review__heading'>
                <h3 class='h3'>Review this Request</h2>
              </div>

              <div class='panel__content'>

                <div class='usa-input'>
                  <fieldset class='usa-input__choices usa-input__choices--inline'>
                    <input v-on:change='setReview' type='radio' name='review' id='review-approving' value='approving' {{ 'checked' if initialState == 'approving' }}/>
                    <label for='review-approving'>Ready for approval</label>

                    <input v-on:change='setReview' type='radio' name='review' id='review-denying' value='denying'/>
                    <label for='review-denying'>Request revisions</label>
                  </fieldset>
                </div>

                <div v-if='approving || denying' class='form__sub-fields' v-cloak>
                  <h3>Message to Requestor <span class='subtitle'>(optional)</span></h3>
                  <div v-if='approving' key='approving' v-cloak>
                    {{ TextInput(
                      review_form.comment,
                      label='Approval comments or notes',
                      description='Provide any comments or notes regarding the approval of this request. <strong>This message will be shared with the person making the JEDI request.</strong>.',
                      paragraph=True,
                      noMaxWidth=True
                    ) }}
                  </div>

                  <div v-else key='denying' v-cloak>
                    {{ TextInput(
                      review_form.comment,
                      label='Revision instructions or notes',
                      paragraph=True,
                      noMaxWidth=True
                    ) }}
                  </div>
                </div>

                <div v-if='approving' class='form__sub-fields' v-cloak>

                  <h3>Authorizing Officials <span class='subtitle'>(optional)</span></h3>
                  <p>Provide the name of the key officials for both parties that have authorized this request to move forward. <strong>This section is not visible to the person making the request. It is only viewable by CCPO staff.</strong></p>

                  <hr />

                  <h4>Mission Authorizing Official</h4>

                  <div class='form-row'>
                    <div class='form-col form-col--half'>
                      {{ TextInput(review_form.fname_mao, placeholder="First name of mission authorizing official") }}
                    </div>

                    <div class='form-col form-col--half'>
                      {{ TextInput(review_form.lname_mao, placeholder="Last name of mission authorizing official") }}
                    </div>
                  </div>

                  <div class='form-row'>
                    <div class='form-col form-col--half'>
                      {{ TextInput(review_form.email_mao, placeholder="name@mail.mil", validation='email') }}
                    </div>

                    <div class='form-col form-col--half'>
                      {{ TextInput(review_form.phone_mao, placeholder="(123) 456-7890", validation='usPhone') }}
                    </div>
                  </div>

                  <hr />

                  <h4>CCPO Authorizing Official</h4>

                  <div class='form-row'>
                    <div class='form-col form-col--half'>
                      {{ TextInput(review_form.fname_ccpo, placeholder="First name of CCPO authorizing official") }}
                    </div>

                    <div class='form-col form-col--half'>
                      {{ TextInput(review_form.lname_ccpo, placeholder="Last name of CCPO authorizing official") }}
                    </div>
                  </div>
                </div>
              </div>
              {% endif %}

            </div>

            {% if jedi_request.is_pending_ccpo_action %}
            <div v-if='approving || denying' class='action-group' v-cloak>
              <button v-if='approving' type="submit" name="approved" class='usa-button usa-button-big'>Approve Request</button>
              <button v-if='denying' type="submit" name="denied" class='usa-button usa-button-big'>Request Revisions</button>
              <a href='{{ url_for("requests.requests_index") }}' class='icon-link'>
                {{ Icon('x') }}
                <span>Cancel</span>
              </a>
            </div>
            {% endif %}

          </div>
        </ccpo-approval>
      </form>
    </section>

</article>

{% endblock %}

