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

{% block body %}
<style>
    body {
        background: url('/images/nasa.webp') no-repeat center center fixed;
        background-size: cover;
    }
    .tracking-in-contract {
        -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }

    @-webkit-keyframes tracking-in-contract {
        0% {
            letter-spacing: 1em;
            opacity: 0;
        }
        40% {
            opacity: 0.6;
        }
        100% {
            letter-spacing: normal;
            opacity: 1;
        }
    }

    @keyframes tracking-in-contract {
        0% {
            letter-spacing: 1em;
            opacity: 0;
        }
        40% {
            opacity: 0.6;
        }
        100% {
            letter-spacing: normal;
            opacity: 1;
        }
    }

    .style-seven {
        overflow: visible; /* For IE */
        height: 30px;
        border-style: solid;
        border-color: black;
        border-width: 1px 0 0 0;
        border-radius: 20px;
    }

    .style-seven:before { /* Not really supposed to work, but does */
        display: block;
        content: "";
        height: 30px;
        margin-top: -31px;
        border-style: solid;
        border-color: black;
        border-width: 0 0 1px 0;
        border-radius: 20px;
    }
    img {
        border-radius: 20px;
    }
</style> 
<div class="container text-center home">
    <div class="title-home">
        <h1 class="tracking-in-contract">Picture of the day<h1>
    </div>
    <div class="date-picker d-flex flex-column align-items-center">
        <p class="fw-bold">Select a date to search for an image</p>
        <form class="d-flex justify-content-center" action="{{ path('app_home') }}" method="get">
            <input class="form-control" style="width: auto;" type="date" name="date" value="{{ selectDate }}" max="{{ "now"|date("Y-m-d") }}">
            <button class="btn btn-primary ms-2" type="submit">
                <i class="bi bi-search"></i>
            </button>
        </form>
    </div>
    <div class="mt-5 fw-bold">
        <h2 class="mt-3 mb-3">{{ data.title }}</h2>
        <p>{{ data.date }}</p>
    </div>
    <div class="container mt-3 mb-5">
        <p class="font-weight-bold">{{ data.explanation }}</p>
    </div>
    <hr class="style-seven fw-bold">
    <div class="mb-3">
        <p><i class="bi bi-badge-hd"></i></p>
    </div>
    {% if data.media_type == 'image' %}
        <div>    
            <img class="col-12 mb-3" src="{{ data.hdurl }}" alt="Image du jour de la NASA">
            <a href="{{ path('app_download', { url: data.hdurl }) }}" class="btn btn-primary mt-1 mb-4">
                <i class="bi bi-download"></i> Download
            </a>
        </div>
    {% elseif data.media_type == 'video' %}
        <div>
            <iframe width="560" height="315" src="{{ data.url }}" frameborder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    {% endif %}
    {% if data.copyright is defined %}
        <div class="fw-bold">
            <p>copyright by : {{ data.copyright }}</p>
        </div>
    {% else %}
        <div class="fw-bold">
            <p>copyright by : {{ data.title }}</p>
        </div>
    {% endif %}
</div>
{% endblock %}