{% 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>Actions</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>
              <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>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}