{% extends 'base.html' %}

{% block optionalParams %}
  <style>
    .centered{
      position: absolute;
    }
    .choiceButtons{
      position: absolute;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      top: 80%;
      bottom: 20%;
    }
    .choice{
      border:5px;
      border-color: #4CAF50;
      border-style: dashed;
    }

.emoji {
  font-size: 40px;
	display: inline-block;
	animation: 
		color .66s linear infinite,
		rotate 1s ease-in-out infinite;
	
	&:nth-child(2) { animation-delay: -.66s; }
	&:nth-child(3) { animation-delay: -1.33s; }
}

@keyframes color {
	50% { filter: hue-rotate(360deg); }
}

@keyframes rotate {
	0%, 100% { transform: rotate(20deg); }
	25% { transform: scale(1.1); }
	50% { transform: rotate(-20deg); }
	75% { transform: scale(.9); }
}
  </style>
{% endblock %}

{% block content %}
<div class="centered">

    {% if image %}
      <form method="post">
        {% csrf_token %}
        <p style="text-align: center;">Качено от: <br><p style="border:2px; border-color: #4CAF50; border-style: dashed; text-align: center;">{{username}}</p></p><br>
        <div class="choice">
        {% if is_video %}
        <video style="display: block; margin: 0 auto; max-width:500px; max-height: 500px;" width="500" controls>
        <source src="/media/{{ image }}" type="video/mp4">
        </video>
        {% else %}
        <img src="/media/{{ image }}" style="max-width:500px;"><br>
     {% endif %}
        </div><br> 
        <p style="text-shadow: 0 0 2px #28a745; float: left;">{{time}}  <p style="text-shadow: 0 0 2px #28a745; float: right;">{{date}}</p></p>
        </div>
        <br><br><br>
        <div class="choiceButtons">
        
        
        <input name="isValid" type="submit" value="Valid" class="buttons">
        <input name="isValid" type="submit" value="Invalid" class="buttons">
        </div>
      </form>


    {% else %}

        <h1>Няма повече работа!</h1>
      <div class="choiceButtons">
        <h1 class="emoji">🎉</h1>
        <h1 class="emoji">🥳</h1>
        <h1 class="emoji">🎉</h1>
      </div>
      
      {% endif %}
      
      
    </div>



{% endblock %}



