{% extends 'base.html' %}

{% block styles -%}
<link rel="stylesheet" href="{% static 'styles/app.scss' %}">
{% endblock styles -%}

{% block scripts %}
{% script 'detail' %}
{% endblock scripts %}

{% block content %}
<article class="word-detail">
  <header>
    <div class="masthead">
      <h1><a href="/">MONEYINPOLITICS.wtf</a></h1>
      <div class="description">
        America’s most comprehensive dictionary of campaign finance jargon
      </div>
    </div>
  </header>
  <section id="card-container" class="card-container"></section>
  <div class="card card--detail card--big">
    <div class="card--headline">
      <div class="word">{{ obj.word }}</div>
      <span class="card--type">{{ obj.type }}</span>
    </div>
    <div class="card--body">
      <div class="card--definition-list">
        <div class="card--definition">
          {% for definition in obj.definition_list %}
            <div class="card--definition-text"><sup>{{ loop.index }}</sup> {{ definition.text|markdown }}</div>
            {% for use in definition.in_use %}
              <div class="card--definition-in-use">
                <q>{{ use.text|italicize(obj.word)|markdown }}</q>
                {% if use.url and use.source %}
                  — <a href="{{ use.url }}">{{ use.source }}</a>
                {% elif use.source %}
                  — {{ use.source }}
                {% endif %}
              </div>
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="card--actions">
      <div class="card--actions-border">
      <div class="card--supplemental">
        <div class="card--action-item card--flag">
          <a aria-label="Flag" href="https://github.com/palewire/moneyinpolitics.wtf/issues/new?assignees=palewire&labels=bug&template=flag-an-error.yaml&title=Error%20with%20{{ obj.word|escape }}&word={{ obj.word|escape }}">
            <svg width="15" height="15" viewBox="0 0 24 24"><path d="M14.4,6L14,4H5V21H7V14H12.6L13,16H20V6H14.4Z" fill="currentColor"/></svg>
            Flag
          </a>
        </div>
        <div id="card--share" class="card--action-item card--share display-none">
          <a aria-label="Share">
            <svg width="15" height="15" viewBox="0 0 24 24"><path d="M21,12L14,5V9C7,10 4,15 3,20C5.5,16.5 9,14.9 14,14.9V19L21,12Z" fill="currentColor"/></svg>
            Share
          </a>
        </div>
      </div>
      </div>
    </div>
  </div>
  <div class="footnotes">
    <a href="https://github.com/palewire/moneyinpolitics.wtf/commits/main/_data/dictionary/{{ obj.word|slugify }}.yaml">Changelog</a>
  </div>
  <div class="card card--detail card--about">
    <div class="card--headline"><a href="/about/">About</a></div>
    <div class="card--body">
      <div class="card--definition-list">
        <div class="card--definition">
          <div class="card--definition-text">Who’s behind this site — and how you can contribute.</div>
        </div>
      </div>
    </div>
    <div class="card--actions">
      <div class="card--actions-border">
        <div class="card--action-item card--expand"><a href="/about/">Learn more</a></div>
      </div>
    </div>
  </div>
</article>
{% endblock content %}