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


{% extends "base.html" %}

{% macro Help(icon_name="", name="", description="", link_text="") %}
  <div class="panel__content col">
    {{ Icon(icon_name, classes="task-order-help__icon") }}
    <h3>{{ name }}</h3>
    <p>{{ description }}</p>
    <a class="icon-link">{{ link_text }}</a>
  </div>
{% endmacro %}

{% block content %}

<div class="col col--grow task-order-get-started">
  <div class="panel task-order-get-started__panel">
    <h1 class="panel__content">{{ "task_orders.new.get_started.title" | translate }}</h1>
    <div class="panel__content">
      <p class="centered">
          {{ "task_orders.new.get_started.intro" | translate }}
      </p>
      <p class="centered">
          {{ "task_orders.new.get_started.intro2" | translate }}
      </p>
    </div>
    <span class="task-order-get-started__list panel__content">
      <ul>
        <li>Statement of work</li>
        <li>Market research</li>
        <li>Security documentation</li>
        <li>Various approvals</li>
      </ul>
    </span>
    <div class="panel__content">
      <p class="centered">
          {{ "task_orders.new.get_started.intro3" | translate }}
      </p>
      <p class="centered">
          {{ "task_orders.new.get_started.intro4" | translate }}
      </p>
    </div>

  </div>

  <div class="panel task-order-needs">
    <h1 class="panel__content">{{ "task_orders.new.get_started.team_header" | translate }}</h1>
    <div class="panel__content task-order-needs__list">
      {{ Help(
        name="Development Lead",
        icon_name="computer",
        description="Your development lead will decide and estimate what types of cloud offerings your group needs.",
        link_text="Share cloud estimate link") }}
      {{ Help(
        name="Security Lead",
        icon_name="shield",
        description="Your security lead will review and approve your security classification needs. They will also review and complete a standardized DD-254.",
        link_text="You'll need their DoD ID number") }}
      {{ Help(
        name="Contracting Officer",
        icon_name="dollar-sign",
        description="Your contracting officer will review your funding needs and ultimately approve your task order.",
        link_text="You'll need their DoD ID number") }}
    </div>
  </div>

  <div class="task-order-get-started__actions">
    <div class="task-order-get-started__button-row">
      <a href="{{ request.referrer or url_for("atst.home") }}" class="icon-link">
        {{ Icon("caret_left") }}
        <span>Cancel</span>
      </a>
      <a href="{{ url_for("task_orders.new", screen=1) }}" class="usa-button usa-button-big">{{ "task_orders.new.get_started.button" | translate }}</a>
    </div>
  </div>
</div>
{% endblock %}