
<div id="keywords" class="content">
  <div class="row">
    <div class="small-12 columns">
      {% if user.is_authenticated %}
        <p id="keyword-intro">These key terms and definitions have been defined by KarmaNotes users.
        You can edit them for accuracy and add more if you like.  Red rows indicate unreviewed entries.</p>
        <p><button id="edit-keywords-button" class="museo700"><i class="fa fa-edit"></i> Edit Key Terms & Definitions</button></p>
      {% else %}
        <p id="keyword-intro">These key terms and definitions have been defined by KarmaNotes users.</p>
      {% endif %}
      <table id="keywords-data-table">
        <thead>
          <tr>
            <td>Key Terms</td>
            <td>Definitions</td>
          </tr>
        </thead>
        {% for keyword in keywords %}
          <tr {% if keyword.unreviewed %}class="unreviewed"{% endif %}>
            <td>{{ keyword.word }}</td>
            <td>
              {% if keyword.definition %}
                {{ keyword.definition }}
              {% else %}
                <em class="light">(not defined yet)</em>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </table>

      <form id="keyword-form" action="{{ note.get_absolute_keywords_url }}" method="post" class="hide">
        {% csrf_token %}
        {{ keyword_formset.management_form }}
        <div class="hide" id="keyword-form-prototype">
          <div class="row keyword-form-row">
            <div class="small-12 large-4 columns">
              {{ keyword_prototype_form.keyword }}
            </div>
            <div class="small-12 large-8 columns">
              {{ keyword_prototype_form.definition }}
              {{ keyword_prototype_form.id }}
            </div>
          </div>
          <hr class="hide-for-large-up" />
        </div>
        <div id="keyword-form-rows">
          {% for form_row in keyword_formset %}
            <div class="row keyword-form-row" data-index="{{ forloop.counter0 }}">
              <div class="small-12 large-4 columns">
                {{ form_row.keyword }}
              </div>
              <div class="small-12 large-8 columns">
                {{ form_row.definition }}
                {{ form_row.id }}
              </div>
            </div>
            <hr class="hide-for-large-up" />
          {% endfor %}
        </div>
        <div class="row hide-for-medium-down">
          <div class="small-12 columns">
            <p class="keywords-hint">(Click <i class="fa fa-plus"></i> or press TAB in the last definition for another row)</p>
          </div>
        </div>
        <div class="row">
          <div class="small-2 columns">
            <button type="submit" name="action" value="keyword-form">Save</button>
          </div>
          <div class="small-9 large-10 columns center">
            <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
          </div>
        </div>
      </form>
    </div>
  </div>
</div> <!-- keywords -->
