{% extends "base.html" %}

{% block content %}
<section class="instructions-panel">
  <h1>{{ translations["instructions.title"] }}</h1>

  <section class="instruction-section">
    <h2>{{ translations["instructions.quick_start_title"] }}</h2>
    <ul>
      {% for item in translations["instructions.quick_start_items"] %}
      <li>{{ item }}</li>
      {% endfor %}
    </ul>
  </section>

  <section class="instruction-section">
    <h2>{{ translations["instructions.states_title"] }}</h2>
    <ul>
      {% for item in translations["instructions.states_items"] %}
      <li>{{ item }}</li>
      {% endfor %}
    </ul>
  </section>

  <section class="instruction-section">
    <h2>{{ translations["instructions.formatting_title"] }}</h2>
    <ul>
      {% for item in translations["instructions.formatting_items"] %}
      <li><strong>{{ item.label }}</strong>: <code>{{ item.example }}</code></li>
      {% endfor %}
    </ul>
  </section>

  <section class="instruction-section">
    <h2>{{ translations["instructions.posted_title"] }}</h2>
    <ul>
      {% for item in translations["instructions.posted_items"] %}
      <li>{{ item }}</li>
      {% endfor %}
    </ul>
  </section>
</section>
{% endblock %}