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

{% from "components/sticky_cta.html" import StickyCTA %}
{% from "components/modal.html" import Modal %}

{% block portfolio_content %}
  <to-form inline-template {% if form.clins %}v-bind:initial-clin-count="{{ form.clins.data | length }}"{% endif %} :enable-save="true">
    <form id="to_form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
      {{ form.csrf_token }}

      {{ StickyCTA(
        text=sticky_cta_text,
        context=('task_orders.form.sticky_header_context' | translate({"step": step}) )) }}

      {% call Modal(name='cancel', dismissable=True) %}
        <div class="task-order__modal-cancel">
          <h1>{{ 'task_orders.form.builder_base.cancel_modal' | translate }}</h1>
          <div class="action-group">
            <button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">
              {{ "task_orders.form.builder_base.delete_draft" | translate }}
            </button>
            <button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">
              {{ "task_orders.form.builder_base.save_draft" | translate }}
            </button>
          </div>
        </div>
      {% endcall %}

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

      <div class="task-order">
        {% block to_builder_form_field %}{% endblock %}
      </div>
      <div
        class="action-group-footer"
        v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
        <div class="action-group-footer--container">
          {% block next_button %}
            <input
              type="submit"
              tabindex="0"
              :disabled="!canSave"
              value="{{ next_button_text }}"
              form="to_form"
              class="usa-button usa-button-primary">
          {% endblock %}

          {% if step != "1" %}
            {% if step == "2" or step == "3" -%}
              <button
                type="submit"
                class="usa-button usa-button-secondary"
                formaction="{{ previous_button_link }}">
                {{ "common.previous" | translate }}
              </button>
            {% else -%}
              <a
                class="usa-button usa-button-secondary"
                href="{{ previous_button_link }}">
                {{ "common.previous" | translate }}
              </a>
            {%- endif %}
          {% endif %}
          <a
            v-on:click="openModal('cancel')"
            class="action-group__action icon-link">
            {{ "common.cancel" | translate }}
          </a>
        </div>
      </div>
    </form>
  </to-form>
{% endblock %}