{% extends "_base.html" %}

{% 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>
      {% if joke.user == user %}
        <div class="border-bottom border-faded m-2 pb-2">
          <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>
        </div>
      {% endif %}
      <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 %}