{% 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-8 col-lg-6">
    <form class="my-2 mx-auto" style="max-width: 30rem;">
      <input type="hidden" name="q" value="{{ request.GET.q }}">
      <label class="my-1 me-2" for="order">Order By:</label>
      <select class="form-control me-sm-2" name="order" id="order">
        {% for field in order_fields %}
        <option value="{{ field }}" {% if order == field %}selected{% endif %}>{{ field|title }}</option>
        {% endfor %}
      </select>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="direction" id="asc" value="asc"
          {% if direction == 'asc' %}checked{% endif %}>
        <label class="form-check-label" for="asc">ASC</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="direction" id="desc" value="desc"
          {% if direction == 'desc' %}checked{% endif %}>
        <label class="form-check-label" for="desc">DESC</label>
      </div>
      <button class="btn btn-primary btn-sm m-2" type="submit">
        Sort
      </button>
    </form>
  </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>
      {% with order=request.GET.order dir=request.GET.direction %}
      <tr>
        {% if order == 'joke' and dir == 'asc' %}
        <th><a href="?order=joke&direction=desc&q={{ request.GET.q }}">Joke</a></th>
        {% else %}
        <th><a href="?order=joke&direction=asc&q={{ request.GET.q }}">Joke</a></th>
        {% endif %}
        {% if order == 'category' and dir == 'asc' %}
        <th><a href="?order=category&direction=desc&q={{ request.GET.q }}">Category</a></th>
        {% else %}
        <th><a href="?order=category&direction=asc&q={{ request.GET.q }}">Category</a></th>
        {% endif %}
        {% if order == 'creator' and dir == 'asc' %}
        <th><a href="?order=creator&direction=desc&q={{ request.GET.q }}">Creator</a></th>
        {% else %}
        <th><a href="?order=creator&direction=asc&q={{ request.GET.q }}">Creator</a></th>
        {% endif %}
        <th>Rating</th>
      </tr>
      {% endwith %}
    </thead>
    <tbody>
      {% for joke in joke_list %}
      <tr>
        <td>
          <a href="{{ joke.get_absolute_url }}">{{ joke.question }}</a>
        </td>
        <td>
          <a href="{% url 'jokes:category' joke.category.slug %}?order={{ order }}&direction={{ direction }}">
            {{ joke.category.category }}
          </a><br>
          {% for tag in joke.tags.all %}
          <a href="{% url 'jokes:tag' tag.slug %}?order={{ order }}&direction={{ direction }}"
            class="badge rounded-pill bg-secondary">{{ tag.tag }}</a>
          {% 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
            <a href="{% url 'jokes:creator' joke.user.username %}?order={{ order }}&direction={{ direction }}">
              {{ joke.user.username }}
            </a>
          </small>
          {% endif %}
        </td>
        <td>
          {% with votes=joke.votes %}
          <div id="rating-container" title="{{ votes.rating }}">
            <div id="rating" style="width:{% widthratio votes.rating 10 100 %}%;"></div>
          </div>
          ({{ votes.num_votes }} vote{{ votes.num_votes|pluralize }})
          {% endwith %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% include 'includes/pagination.html' %}
{% endblock %}