{% extends "base.html" %}
{% block title %}Check your repair - {{ company.name }}{% endblock %}
{% block content %}
<div class="container">
  <div class="split">
    <section class="stack">
      <div class="stack-md">
        <span class="eyebrow">Customer portal</span>
        <h1 class="hero-title">Check the progress of your repair</h1>
        <p class="lead">Enter your job number to see where your unit is, read the latest updates from our technicians and find out when it will be ready.</p>
      </div>
      <form class="card narrow" method="post" action="{{ url_for('login_post') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        {% if error %}<div class="flash error" role="alert">{{ error }}</div>{% endif %}
        <div class="field">
          <label for="job_number">Job number</label>
          <input id="job_number" name="job_number" type="text" inputmode="numeric" autocomplete="off" placeholder="e.g. 10482" value="{{ job_number or '' }}" required class="mono">
        </div>
        <div class="field">
          <label for="verify">Email or phone number</label>
          <input id="verify" name="verify" type="text" autocomplete="off" placeholder="The one you gave us when booking" required>
          <span class="small">This keeps your job private. Both details must match our records.</span>
        </div>
        <button class="btn btn-primary btn-block" type="submit">View job status</button>
        <span class="small">Can't find your job number? It is printed on your quote and on the label attached to your unit.</span>
      </form>
    </section>
    <aside class="card dark">
      <h2>What you will see</h2>
      <ol class="steps">
        {% for name in stages %}
        <li><span class="step-num">{{ loop.index }}</span><span class="step-name">{{ name }}</span></li>
        {% endfor %}
      </ol>
      <p class="small section-break dark-break">Our technicians post an update each time your job moves forward, so this page always shows where things stand.</p>
    </aside>
  </div>
</div>
{% endblock %}