<div class="tt">

  {% if equippable %}
  <div class="tt-equip-btns">
    {% if equippable.is_equipped %}
      <button class="btn btn-equip btn-disabled"{% if equippable.token_id %} data-token-id="{{ equippable.token_id }}"{% endif %}{% if equippable.deck_id %} data-deck-id="{{ equippable.deck_id }}"{% endif %}>×</button>
      <button class="btn btn-unequip"{% if equippable.token_id %} data-token-id="{{ equippable.token_id }}"{% endif %}{% if equippable.deck_id %} data-deck-id="{{ equippable.deck_id }}"{% endif %}>DOFF</button>
    {% else %}
      <button class="btn btn-equip"{% if equippable.token_id %} data-token-id="{{ equippable.token_id }}"{% endif %}{% if equippable.deck_id %} data-deck-id="{{ equippable.deck_id }}"{% endif %}>DON</button>
      <button class="btn btn-unequip btn-disabled"{% if equippable.token_id %} data-token-id="{{ equippable.token_id }}"{% endif %}{% if equippable.deck_id %} data-deck-id="{{ equippable.deck_id }}"{% endif %}>×</button>
    {% endif %}
  </div>
  {% endif %}

  <h4 class="tt-title">{{ title }}</h4>

  {% if type_label %}<p class="tt-type">{{ type_label }}</p>{% endif %}

  {% if symbol %}<span class="tt-symbol">{{ symbol }}</span>{% endif %}

  {% if degree_str %}<p class="tt-degree">{{ degree_str }}</p>{% endif %}

  {% if description %}<p class="tt-description">{{ description }}</p>{% endif %}

  {% if shoptalk %}<p class="tt-shoptalk"><em>{{ shoptalk }}</em></p>{% endif %}

  {% if expiry %}<p class="tt-expiry">{{ expiry }}</p>{% endif %}

  {% if effect %}<p class="tt-effect">{{ effect }}</p>{% endif %}

  {% if dignities %}
  <table class="tt-table tt-table--dignities">
    {% for key, value in dignities.items %}
    <tr><th>{{ key }}</th><td>{{ value }}</td></tr>
    {% endfor %}
  </table>
  {% endif %}

  {% if aspects %}
  <ul class="tt-aspects">
    {% for asp in aspects %}
    <li><span class="tt-asp-symbol">{{ asp.symbol }}</span> {{ asp.type }} {{ asp.body }} <span class="tt-asp-orb">{{ asp.orb }}</span></li>
    {% endfor %}
  </ul>
  {% endif %}

  {% if keywords_up or keywords_rev %}
  <div class="tt-keywords">
    {% if keywords_up %}
    <ul class="tt-keywords-up">
      {% for kw in keywords_up %}<li>{{ kw }}</li>{% endfor %}
    </ul>
    {% endif %}
    {% if keywords_rev %}
    <ul class="tt-keywords-rev">
      {% for kw in keywords_rev %}<li>{{ kw }}</li>{% endfor %}
    </ul>
    {% endif %}
  </div>
  {% endif %}

  {% if cautions %}
  <div class="tt-fyi tt-fyi--cautions">
    {% for caution in cautions %}
    <div class="tt-fyi-item">
      {% if caution.type_label %}<p class="tt-fyi-type">{{ caution.type_label }}</p>{% endif %}
      {% if caution.shoptalk %}<p class="tt-fyi-shoptalk">{{ caution.shoptalk }}</p>{% endif %}
      {% if caution.effect %}<p class="tt-fyi-effect">{{ caution.effect }}</p>{% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if nav %}
  <div class="tt-nav">
    <span class="tt-nav-prv">{{ nav.prv }}</span>
    <span class="tt-nav-nxt">{{ nav.nxt }}</span>
  </div>
  {% endif %}

</div>
