{% extends 'base.html.j2' %}

{% block title %}
  Play Key {{ key.key_string }}
{% endblock title %}

{% block content_before %}
  Play Key {{ key.key_string }}
{% endblock content_before %}

{% block content %}
  <div class="card shadow-sm mx-auto pb-3 bg-dark border-primary" style="width: 30em;">
    <div class="card-body">
      <div class="row">
        <div class="col text-center">
          <h4>Key Info</h4>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col text-right">
          Uses Left:
        </div>
        <br/>
        <div class="col">
          {{ key.key_uses}}
        </div>
      </div>
      <div class="row">
        <div class="col text-right">
          Uses Left:
        </div>
        <br/>
        <div class="col">
          {{ key.key_uses}}
        </div>
      </div>
      <div class="row">
        <div class="col text-right">
          Created:
        </div>
        <br/>
        <div class="col">
          {{ key.created_at }}
        </div>
      </div>
      <div class="row">
        <div class="col text-right">
          Active:
        </div>
        <div class="col">
          {% if key.active %}
            <h5 class="far fa-check-square text-success"></h5>
          {% else %}
            <h5 class="far fa-times-circle text-danger"></h5>
          {% endif %}
        </div>
      </div>
      <div class="row">
        <div class="col text-right">
          Notes:
        </div>
        <br/>
        <div class="col">
          {{ key.notes }}
        </div>
      </div>
      <hr class="bg-primary"/>
      <div class="row">
        <div class="col text-center">
          <h4>Associated Accounts</h4>
        </div>
      </div>
      <br/>
      {% if accounts %}
        {% for account in accounts %}
          <div class="row">
            <div class="col text-right">
             {{ account.username }}
            </div>
            <br/>
            <div class="col">
              <a role="button" class="btn btn-primary"
                href='{{ url_for('accounts.view', id=account.id) }}'>
                View Account
              </a>
            </div>
          </div>
        {% endfor %}
      {% else %}
        No accounts are using ths Play Key
      {% endif %}
      <br/>
    </div>
  </div>
{% endblock content %}
