{% extends "base_menu.html" %}
{% load humanize %} <!-- https://docs.djangoproject.com/en/3.0/ref/contrib/humanize -->

{% block title %} {{ ad.title }} {% endblock %}

{% block head %}
<style>
.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}
</style>
{% endblock %}

{% block content %}
{% if ad.content_type %}
<div id="overlay" class="overlay" style="text-align: center;"
   onclick="document.getElementById('overlay').style.display = 'none';" >
<img style="width:90%;margin-top: 50px; border:3px solid black;" src="{% url 'ads:ad picture' ad.id %}">
</div>
{% endif %}
<span style="float: right;">
({{ ad.updated_at|naturaltime }})
{% if ad.owner == user %}
<a href="{% url 'ads:ad update' ad.id %}"><i class="fa fa-pencil"></i></a>
<a href="{% url 'ads:ad delete' ad.id %}"><i class="fa fa-trash"></i></a>
{% endif %}
</span>
<h1>{{ ad.title }}</h1>
{% if ad.content_type %}
<img style="float:right; max-width:50%;" src="{% url 'ads:ad picture' ad.id %}"
    onclick="document.getElementById('overlay').style.display = 'block';">
{% endif %}
<p>
{{ ad.price }}
</p>
<p>
{{ ad.text }}
</p>
{% if ad.tags.all %}
<p>Tags:
  {% for tag in ad.tags.all %}
  <span class="badge rounded-pill bg-success">{{ tag }}</span>
  {% endfor %}
</p>
{% endif %}
{% if user.is_authenticated %}
<br clear="all"/>
<p>
{% load crispy_forms_tags %}
<form method="post" action="{% url 'ads:ad comment create' ad.id %}">
    {% csrf_token %}
    {{ comment_form|crispy }}
<input type="submit" value="Submit">
<input type="submit" value="All Ads" onclick="window.location.href='{% url 'ads:index' %}';return false;">
</form>
</p>
{% else %}
<p><br/>
<a href="{% url 'ads:index' %}">All Ads</a>
</p><br/>
{% endif %}
{% for comment in comments %}
<p> {{ comment.text }}<br> ({{ comment.updated_at|naturaltime }})
{% if user == comment.owner %}
<a href="{% url 'ads:ad comment delete' comment.id %}"><i class="fa fa-trash"></i></a>
{% endif %}
</p>
{% endfor %}
{% endblock %}