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

{% block title %}Détail du mémento : {{ memento.getTitle() }}{% endblock %}

{% block body %}
    <header>
        <h1>mémento</h1>
        <a href={{ path('memento') }} class="btn-link">retour a la liste des mementos</a>
        {% if app.user %}
            <div class="mb-3">
                You are logged in as
                {{ app.user.userIdentifier }},
                <a href="{{ logout_path() }}">Logout</a>
            </div>
        {% endif %}
        <button type="button" class="btn" id="loginBtn" onclick="event.preventDefault(); window.location.href='{{ path('app_login') }}';">
            <img class="img-fluid" src={{ asset('image/login.png') }} alt="logo de connexion" height="30" width="30">
        </button>
    </header>

    <div class="container mt-5">
        <div class="row">
            <section>
                <h1>{{ memento.getTitle() }}</h1>
                {% if memento.getImage() %}
                    <img src="{{ asset('upload/image/' ~ memento.getImage()) }}" height="200" width="auto" alt="{{ memento.getTitle() }}">
				{% endif %}
				<p>{{ memento.getText() }}</p>
				{% for content in memento.getCardContents %}
					<a href="{{ asset('upload/content/' ~ content.getContent()) }}" target="_blank" class="btn btn-primary btn-sm me-2 mb-2">
						📄
						{{ content.title}}
					</a>
				{% endfor %}
            </section>
        </div>
    </div>
{% endblock %}