{% extends "_base.html" %}
{% load static %}

{% block javascript %}
  <script>
    const ajaxURL = "{% url 'jokes:ajax-vote' joke.slug %}";
  </script>
  <script src="{% static 'js/jokes.js' %}"></script>
{% endblock %}
{% block title %}Joke{% endblock %}
{% block main %}
  <div class="card border-primary m-auto mb-3 text-center"
    style="max-width: 30rem">
    <div class="card-header">{{ joke.question }}</div>
    <div class="card-body text-primary">
      <h5 class="card-title">{{ joke.answer }}</h5>
    </div>
    <div class="card-footer">
      <div class="border-bottom border-faded pb-2">
        <strong>Category:</strong> {{ joke.category.category }}<br>
        {% for tag in joke.tags.all %}
          <span class="badge rounded-pill bg-secondary">{{ tag.tag }}</span>
        {% endfor %}
      </div>
      <div class="border-bottom border-faded m-2 pb-2">
        {% if joke.user == user %}
          <a href="{% url 'jokes:update' joke.slug %}"
            class="btn btn-info btn-sm me-2">Update</a>
          <a href="{% url 'jokes:delete' joke.slug %}"
            class="btn btn-danger btn-sm me-2">Delete</a>
          {% with votes=joke.votes %}
            <p>Your joke has
            <span id="num-votes">{{ votes.num_votes|default:'no' }}
            vote{{ votes.num_votes|pluralize }}</span>{% if votes.num_votes %}:
            <span id="likes">{{ votes.likes }}
              like{{ votes.likes|pluralize }}</span> and
            <span id="dislikes">{{ votes.dislikes }}
              dislike{{ votes.dislikes|pluralize }}</span>{% endif %}.</p>
          {% endwith %}
        {% else %}
          {% csrf_token %}
          {% with votes=joke.votes %}
            <button id="dislike-button" class="btn btn-light">
              <i class="fas fa-thumbs-down fa-2x text-danger  mx-3"></i>
              <span id="dislikes">{{ votes.dislikes }}</span>
            </button>
            <button id="like-button" class="btn btn-light">
              <i class="fas fa-thumbs-up fa-2x text-success mx-3"></i>
              <span id="likes">{{ votes.likes }}</span>
            </button>
            <div id="output" class="text-info"></div>
            <span id="num-votes">
              {{ votes.num_votes }}
              vote{{ votes.num_votes|pluralize }}
            </span>
          {% endwith %}
        {% endif %}
      </div>
      <small class="text-muted">
        {% if joke.user.avatar %}
          <img src="{{ joke.user.avatar.url }}" alt="{{ joke.user.username }}"
            class="mt-1 rounded float-end" width="50" height="50">
        {% endif %}
        Created on: {{ joke.created }} by {{ joke.user.username }}<br>
        Last updated: {{ joke.updated }}
      </small>
    </div>
  </div>
{% endblock %}