{% extends "base.html" %}

{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/phone_input.html" import PhoneInput %}

{% block content %}

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

{% include "fragments/flash.html" %}

    <section class='panel'>
      <header class='panel__heading panel__heading--divider request-approval__heading'>
        <h1 class='h2'>
          {{ "requests.approval.request_title" | translate({ "displayname": 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>{{ "requests.approval.ccpo_internal_comments" | translate }}</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'>
                  {{ "requests.approval.no_ccpo_comments" | translate }}
                </p>
              </div>
            {% endif %}

          </div>

          <div class='panel__heading internal-notes__add-comment__heading'>
            <h3 class='h3'>
              {{ "requests.approval.add_comment" | translate }}
            </h3>
          </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">
            {{ "requests.approval.save_notes" | translate }}
          </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'>
                  {{ "requests.approval.ccpo_review_activity" | translate }}
                </h2>
              </header>

              <div class='approval-log'>
                {% if reviews %}
                <ol>
                  {% for review in reviews %}
                    <li>
                      <article class='approval-log__log-item'>
                        <div>
                          <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'>
                                  {{ "requests.approval.mission_owner_approval_on_behalf_of" | translate }}
                                </h3>
                                <span>{{ review.full_name_mao }}</span>
                                <span>{{ review.email_mao }}</span>
                                <span>
                                  {{ review.phone_mao }}
                                  {% if review.phone_ext_mao %}
                                    ext. {{ review.phone_ext_mao }}
                                  {% endif %}
                                </span>
                              </div>
                            {% endif %}

                            {% if review.lname_ccpo %}
                              <div class='approval-log__behalf'>
                                <h3 class='approval-log__log-item__header'>
                                  {{ "requests.approval.ccpo_approval_on_behalf_of" | translate }}
                                </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'>
                      {{ "requests.approval.no_ccpo_approval_request_changes" | translate }}
                    </p>
                  </div>
                {% endif %}
              </div>

              {% if jedi_request.is_pending_ccpo_action %}
              <div class='panel__heading request-approval__review__heading'>
                <h3 class='h3'>
                  {{ "requests.approval.review_request" | translate }}
                </h3>
              </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'>
                      {{ "requests.approval.ready_for_approval" | translate }}
                    </label>

                    <input v-on:change='setReview' type='radio' name='review' id='review-denying' value='denying'/>
                    <label for='review-denying'>
                      {{ "requests.approval.request_revisions" | translate }}
                    </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=("requests.approval.approve_comments_or_notes_label" | translate),
                      description=("requests.approval.approve_comments_or_notes_description" | translate),
                      paragraph=True,
                      noMaxWidth=True
                    ) }}
                  </div>

                  <div v-else key='denying' v-cloak>
                    {{ TextInput(
                      review_form.comment,
                      label=("requests.approval.revision_instructions_or_notes_label" | translate),
                      paragraph=True,
                      noMaxWidth=True
                    ) }}
                  </div>
                </div>

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

                  <h3>
                    {{ "requests.approval.authorizing_officials_title" | translate }}
                    <span class='subtitle'>(optional)</span>
                  </h3>

                  <p>
                    {{ "requests.approval.authorizing_officials_paragraph" | translate }}
                  </p>

                  <hr />

                  <h4>
                    {{ "requests.approval.mission_authorizing_official_title" | translate }}
                  </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>

                  {{ TextInput(review_form.email_mao, placeholder="name@mail.mil", validation='email') }}
                  {{ PhoneInput(review_form.phone_mao, review_form.phone_ext_mao) }}

                  <hr />

                  <h4>
                    {{ "requests.approval.ccpo_authorizing_official_title" | translate }}
                  </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 %}