{% extends '../requests_new.html.to' %}

{% block form %}
<h2>Details of Use</h2>

{% autoescape None %}
{% if f.errors %}
<b>There were some errors, see below.</b>
{% end %}


  <h3 id="application-details">Application Details</h3>

  <button class="usa-button-secondary usa-button-active">New Application</button>
  <button class="usa-button-secondary" disabled>Existing Application</button>
  <button class="usa-button-secondary" disabled>Sandbox Application</button>


  {{ f.application_name.label }}
  {{ f.application_name(placeholder="What is the application name?") }}

  {{ f.application_description.label }}
  {{ f.application_description(placeholder="Describe the application") }}

  {{ f.dollar_value.label }}
  {{ f.dollar_value(placeholder="$") }}

  {{ f.input_estimate.label }}
  {{ f.input_estimate }}

  <b>NEW</b>
  <hr>
  <fieldset>
    <label for="input-start-date">Expected start date</label>
    <div class="usa-date-of-birth">
      <div class="usa-form-group usa-form-group-month">
        {{ f.date_start.month.label }}
        {{ f.date_start.month(min="1", max="12") }}
       </div>
      <div class="usa-form-group usa-form-group-day">
        {{ f.date_start.day.label }}
        {{ f.date_start.day(min="1", max="31") }}
       </div>
      <div class="usa-form-group usa-form-group-year">
        {{ f.date_start.year.label }}
        {{ f.date_start.year(min="2000", max="2040") }}
       </div>
     </div>
  </fieldset>

  {{ f.period_of_performance.label }}
  {{ f.period_of_performance }}

  <br>

  <fieldset class="usa-fieldset-inputs usa-sans">
    {{ f.classification_level.label }}
    {{ f.classification_level(class_="usa-unstyled-list") }}
  </fieldset>

  {{ f.primary_service_branch.label }}
  {{ f.primary_service_branch(placeholder="Add tags associated with service branches") }}

  <br>

  <fieldset class="usa-fieldset-inputs usa-sans">
    {{ f.cloud_model.label }}
    {{ f.cloud_model(class_="usa-unstyled-list") }}
  </fieldset>



  <!-- Computation -->
  <h4 id="application-details">Computation</h4>
  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>

  {{ f.number_of_cores.label }}
  {{ f.number_of_cores(placeholder="Total cores", min="1", max="32") }}

  <!-- example field with custom validation -->
  {{ f.total_ram.label }}
  {{ f.total_ram(placeholder="Total RAM", min="1", max="32") }}
  <!-- example validation errors -->
  {% for e in f.total_ram.errors %}
    <div class="usa-input-error-message">
      {{ e }}
    </div>
  {% end %}


  <!-- Storage -->
  <h4 id="application-storage">Storage</h4>
  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>

  {{ f.object_storage.label }}
  {{ f.object_storage(placeholder="Total object storage") }}

  {{ f.server_storage.label }}
  {{ f.server_storage(placeholder="Total server storage") }}

  <!-- Application Usage -->
  <h4 id="application-usage">Estimated Application Storage</h4>
  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>

  {{ f.total_active_users.label }}
  {{ f.total_active_users(placeholder="Total active users") }}

  {{ f.total_peak_users.label }}
  {{ f.total_peak_users(placeholder="Total peak users") }}

  {{ f.total_requests.label }}
  {{ f.total_requests(placeholder="Total requests") }}

  {{ f.total_environments.label }}
  {{ f.total_environments(placeholder="Total number of environments") }}
{% end %}