{% extends "_base.html" %}

{% block title %}Jokes{% endblock %}
{% block main %}
<a class="btn btn-success btn-sm float-end" href="{% url 'jokes:create' %}">
  + New Joke
</a>
<h2>Jokes</h2>
<div class="table-responsive">
  <table class="table table-striped" style="min-width: 500px">
    <thead>
      <tr>
        <th>Joke</th>
        <th>Category</th>
        <th>Creator</th>
      </tr>
    </thead>
    <tbody>
      {% for joke in joke_list %}
      <tr>
        <td>
          <a href="{{ joke.get_absolute_url }}">{{ joke.question }}</a>
        </td>
        <td>
          {{ joke.category.category }}<br>
          {% for tag in joke.tags.all %}
          <span class="badge rounded-pill bg-secondary">
            {{ tag.tag }}
          </span>
          {% endfor %}
        </td>
        <td>
          {% if joke.user == user %}
          <a href="{% url 'jokes:update' joke.slug %}">
            <i class="fas fa-pencil-alt"></i>
          </a>
          <a href="{% url 'jokes:delete' joke.slug %}">
            <i class="far fa-trash-alt"></i>
          </a>
          {% else %}
          <small>by {{ joke.user.username }}</small>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}