{% extends 'animation_base.html.twig' %}

{% block body %}

{% set pictureType = "" %}
{% set animationType = "" %}  
{% set textType = "" %}
{% set textDirection = "" %}
{% set shipyardDirection = "" %}


{% for tag in tags %}
  <!-- If cases to match the given tag to a picture type for css classes-->

  <!-- sailingboat -->
  
 {% if tag.Name =="sailingboat" or tag.Name =="steamboat" or tag.Name == "freighter" or tag.Name == "pirateboat" %}
  {% set pictureType = "boat" %}
  {% set textType = "textBoat" %}

    <!-- subamarine -->
  {% elseif tag.Name == "submarine" %}
  {% set pictureType = "submarine" %}
  {% set textType = "textSubmarine" %}

  <!-- fly -->
  {% elseif tag.Name == "hotairballoon" or tag.Name == "helicopter" %}
  {% set pictureType = "fly" %}
  {% set textType = "textFly" %}

    <!-- animal -->
  {% elseif tag.Name == "seanimal" %}
  {% set pictureType = "animal" %}
  {% set textType = "textAnimal" %}
  {% endif %}

  <!--if cases for left and right movement given from user, used for animation classes-->
  {% if tag.Name == "left" %}
    {% set animationType = "left" %}
    {% set textDirection = "textLeft" %}
    {% set shipyardDirection = "shipyardLeft" %}

  {% elseif tag.Name == "right" %}
    {% set animationType = "right" %}
    {% set textDirection = "textRight" %}
    {% set shipyardDirection = "shipyardRight" %}
  {% endif %}

{% endfor %}



<div id="anim_container">
  <p id="anim_uploaded_NameAge" class="{{textType}} {{textDirection}}">{{name}}, {{age}}</p>
  <img src="/upload/{{imageFile}}" id="anim_uploaded_image" class="{{pictureType}} {{animationType}}"  alt="">
  <img src="/assets/images/Wellen_Animationsdatei.png" class="anim_waves" alt="Wellenbild">
  <img src="/assets/images/Werft_Animationsdatei.png" id="anim_shipyard" class="{{shipyardDirection}}" alt="WerftBild">
</div>


    
    



 
{% endblock %}