18F/calc

{% extends "data_capture/base.html" %}
{% load staticfiles %}

{% block body_class %}content--skinny tutorial{% endblock %}

{% block body %}
<div class="container">
  <div class="row">
    <div class="card">
      <div class="content">
        <h1>Adding price data to CALC</h1>
        <p>
          Now <b>contracting officers</b> and other acquisition professionals can add price lists directly to CALC. And it only takes about a minute.
        </p>

        <div class="form-button-row align-center submit-group">
          <a href="{% url 'data_capture:step_1' %}" class="usa-button usa-button-primary">
            {% if user.is_authenticated %}
              Add price lists
            {% else %}
              Log in to add price lists
            {% endif %}
          </a>
        </div> <!-- Ends form-button-row div -->
      </div> <!-- Ends card_content div -->
    </div> <!-- Ends card div -->

    <div class="card">
      <div class="content">
        <h3>First, find a recent price list on your computer that you want to submit</h3>
        {{ upload_example_info }}
      </div>
    </div>

    <div class="card">
        <div class="content">
          <h3>Next, log in to CALC</h3>
          <p>To <a href="{% url 'data_capture:step_1' %}">log in</a>, click the login button at the bottom of any page on this website. You'll be taken to Cloud.gov and asked to enter your GSA login credentials. You should then be automatically redirected to page one of the "Add price data" form.</p>
          <p class="img-wrapper"> <img src="{% static 'frontend/images/tutorial/callout_footer-login.png' %}" alt=""> </p>
          <div class="arrow"> </div>
          <p class="img-wrapper"> <img src="{% static 'frontend/images/tutorial/logo_cloud-gov.svg' %}" width="220px" alt=""></p>
        </div> <!-- Ends card_content div -->
      </div> <!-- Ends card div -->

    <div class="card">
        <div class="content">
          <h3>Then, upload your price list</h3>
          <p>Once you're logged in and viewing page one of "Add price data," you can upload your approved price list. You will be asked for very basic details around the contract (e.g. contract number, schedule name, business size, etc.). When you have filled that out, simply upload your contract to CALC.</p>
          <p class="img-wrapper"> <img src="{% static 'frontend/images/tutorial/callout_step-1.png' %}" alt="The first step of the data upload workflow asks you to select a schedule and provide a contract number."></p>
          <div class="arrow"></div>
          <p class="img-wrapper"> <img src="{% static 'frontend/images/tutorial/callout_step-2.png' %}" alt="The second step of the data upload workflow asks for details related to your contract."></p>
          <div class="arrow"></div>
          <p class="img-wrapper"> <img src="{% static 'frontend/images/tutorial/callout_step-3.png' %}" alt="The third step asks you to upload an Excel spreadsheet containing labor category information. When you upload your data, CALC will do some basic verification to ensure it can read your data properly."></p>
          <div class="arrow"></div>
          <p class="img-wrapper"><img src="{% static 'frontend/images/tutorial/callout_step-4.png' %}" alt="The fourth step allows you to verify the details of the price list you've just uploaded."></p>
          <div class="arrow"></div>
          <p class="img-wrapper"><img src="{% static 'frontend/images/tutorial/callout_success.png' %}" alt="After you've submitted your price list, a CALC admin will review it and approve it for inclusion in CALC."></p>
        </div> <!-- Ends card_content div -->
      </div> <!-- Ends card div -->

    <div class="card">
        <div class="content">
          <h3>You're done! It's that easy.</h3>
          <p>You should receive an e-mail when your price list has been approved. If you have any questions or suggestions, please reach out to us at <a href="mailto:calc@gsa.gov">calc@gsa.gov</a>.</p>
          <div class="form-button-row align-center submit-group">
            <a href="{% url 'data_capture:step_1' %}" class="usa-button usa-button-primary">
              {% if user.is_authenticated %}
                Try it
              {% else %}
                Log in to try it
              {% endif %}
            </a>
          </div> <!-- Ends form-button-row div -->
        </div> <!-- Ends card_content div -->
      </div> <!-- Ends card div -->
  </div> <!-- Ends row div -->
</div> <!-- Ends container div -->
{% endblock %}