{% extends 'base.html' %}

{% block title %} My Images {% endblock %}
{% block optionalParams %}
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
.posButtons{
  position: absolute;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  top: 80%;
  bottom: 20%;
}


</style>
{% endblock %}
{% block content %}
{% if user.is_authenticated %}

  <div class="mx-auto">
  
    
  {% for i in get_status reversed %}
  <div class="slide" width=500px height=500px>
  {% if i.is_video %}
  <video style="display: block; margin: 0 auto; max-width:500px; max-height: 500px;" width="500" controls>
  <source src="/media/{{ i.image }}" type="video/mp4">
  </video>
  {% else %}
    <img  src="/media/{{ i.image }}" style=" display: block; margin: 0 auto; max-width:500px; max-height: 500px;"/>
  {% endif %}
    <p style="text-shadow: 0 0 2px #28a745; float: left;">{{forloop.counter}}/{{img_number}}  <p style="text-shadow: 0 0 2px #28a745; float: right;">{{i.date}}</p></p>
  <br><br>
  {% if i.reason %}
  <p class="animate__animated animate__headShake" style="text-align: center;"> ❌ Снимката ти е маркирана като невалидна. Ако мислиш че има грешка ни изпратете <a href="mailto:boyan+revaluate@bobokara.com">имейл.</a> ❌</p>
  
  {% elif i.tokenized  %}
  <p class="animate__animated animate__tada" style="text-align: center;">✅ Снимката ти е валидна! Провери баланса си! ✅</p>
 
  {% else %}
  <p class="animate__animated animate__pulse" style="text-align: center;"> ⏳ Снимката ти очаква обработка! ⏳ </p>

  {% endif %}
  <br><br><br><br><br>
</div>
  {% endfor %}

  <div class="posButtons">
    <button class="Buttons" onclick="myShow.previous()">Предишнa</button>
    <button class="Buttons" onclick="myShow.next()">Следващa</button>
  </div>

  <script>
    myShow = w3.slideshow(".slide", 0);
    </script>

{% else %}
  <p>You are not logged in</p>
  <a href="{% url 'login' %}">Log In</a>
{% endif %}
</div>
{% endblock %}
