{% extends "_base.html" %}

{% block title %}Jokes{% endblock %}
{% block main %}
  <div class="row">
    <div class="col-12 col-md-2 col-lg-3">
      <h2>Jokes</h2>
    </div>
    <div class="col-12 col-md-2 col-lg-3 text-end">
      <a class="btn btn-success btn-sm m-2" href="{% url 'jokes:create' %}">
        + New Joke
      </a>
    </div>
  </div>

  <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 'joke-update' joke.slug %}">
                  <i class="fas fa-pencil-alt"></i>
                </a>
                <a href="{% url 'joke-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>
  <nav aria-label="pagination">
    <ul class="pagination justify-content-center">
      {% if page_obj.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page=1">&laquo; 1…</a>
        </li>
        {% if page_obj.previous_page_number != 1 %}
          <li class="page-item">
            <a class="page-link" 
              href="?page={{ page_obj.previous_page_number }}">
              {{ page_obj.previous_page_number }}
            </a>
          </li>
        {% endif %}
      {% endif %}
      <li class="page-item active">
        <span class="page-link">
          {{ page_obj.number }}
        </span>
      </li>
      {% if page_obj.has_next %}
        {% if page_obj.next_page_number != page_obj.paginator.num_pages %}
          <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">
              {{ page_obj.next_page_number }}
            </a>
          </li>
        {% endif %}
        <li class="page-item">
          <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">
            …{{ page_obj.paginator.num_pages }} &raquo;
          </a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endblock %}