{% extends 'base.html' %}
{% block title %}Add Hymn{% endblock %}

{% block content %}

<nav class="breadcrumb">
  <a href="{{ url_for('services.index') }}">Services</a>
  <span class="breadcrumb-sep">›</span>
  <span>Add Hymn</span>
</nav>

<section>
  <h2>Add a New Hymn</h2>
  <p class="text-muted" style="margin-bottom:24px">
    Adds an entry to <code>library.hymn</code> and <code>library.hymn_index</code>.
    Verify the number against the A&amp;M New Standard index before submitting.
  </p>

  <form class="hymn-add-form" method="post" action="{{ url_for('hymn_add.add_post') }}">

    <div class="form-grid">

      <div class="form-group form-group--wide">
        <label for="words">First line <span class="req">*</span></label>
        <input type="text" id="words" name="words" required
               placeholder="Alleluia, sing to Jesus!">
      </div>

      <div class="form-group">
        <label for="number">Hymn number <span class="req">*</span></label>
        <input type="number" id="number" name="number" required min="1" max="9999"
               placeholder="262">
      </div>

      <div class="form-group">
        <label for="tune_number">Tune number <span class="req">*</span></label>
        <select id="tune_number" name="tune_number">
          {% for tn in tune_numbers %}
          <option value="{{ tn }}" {% if tn == 'First' %}selected{% endif %}>{{ tn }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="form-group">
        <label for="tune">Tune name <span class="req">*</span></label>
        <input type="text" id="tune" name="tune" required
               list="tune-list" placeholder="HYFRYDOL">
        <datalist id="tune-list">
          {% for t in tunes %}
          <option value="{{ t }}">
          {% endfor %}
        </datalist>
      </div>

      <div class="form-group">
        <label for="metre">Metre <span class="req">*</span></label>
        <select id="metre" name="metre" required>
          <option value="">— select —</option>
          {% for m in metres %}
          <option value="{{ m }}">{{ m }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="form-group">
        <label for="author">Words author</label>
        <input type="text" id="author" name="author"
               placeholder="W. C. Dix">
      </div>

    </div>{# .form-grid #}

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Add hymn</button>
      <a class="btn btn-muted" href="{{ url_for('services.index') }}">Cancel</a>
    </div>

  </form>
</section>

{% endblock %}