{% extends 'portfolios/base.html' %}

{% from "components/text_input.html" import TextInput %}
{% from "components/multi_checkbox_input.html" import MultiCheckboxInput %}
{% from 'components/save_button.html' import SaveButton %}

{% block content %}

{% include "fragments/flash.html" %}
<base-form inline-template>
  <div class="col">
    <div class="panel">

      <div class="panel__heading">
        <h1 class="subheading">
          <div class="h2">{{ "task_orders.so_review.title" | translate }}</div>
        </h1>
      </div>


      <div class="panel__content">
        <form method="POST" action='{{ url_for("task_orders.submit_so_review", task_order_id=task_order.id) }}'>
          {{ form.csrf_token }}
          <h3 class="subheading">{{ "task_orders.so_review.certification" | translate }}</h3>
          {{ TextInput(form.certifying_official) }}
          {{ TextInput(form.certifying_official_title) }}
          {{ TextInput(form.certifying_official_phone, placeholder='(123) 456-7890', validation='usPhone') }}
          {{ TextInput(form.certifying_official_address, paragraph=True) }}

          <hr>

          {{ MultiCheckboxInput(form.required_distribution) }}

          <div class="action-group">
            {{ SaveButton(text='Continue', additional_classes="usa-button-big") }}
          </div>
        </form>
      </div>
    </div>
  </div>
</base-form>
{% endblock %}
