{% extends 'base.jinja' %}

{% block headline %}<h3 class="text-center">Account</h3>{% endblock %}

{% block content %}
    <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 text-left p-3 pl-4">
        <div class="row p-1">
            <div class="col-12 p-3 bg-light text-dark">
                <h3>{{ name }}</h3>
                <p><strong>Vorname:</strong> {{ first_name }}</p>
                <p><strong>Nachname:</strong> {{ last_name }}</p>
                <p><strong>E-Mail:</strong> {{ email }}</p>
                <a href="{{ url('change-account') }}">Bearbeiten</a>
            </div>
        </div>
        <div class="row p-1">
            <div class="col-12 p-3 bg-light text-dark">
                <h4>Your Food Ratings:</h4>
                <ul>
                    {% for rating in food_ratings %}
                        <li>{{ rating.food.name }}: {{ rating.rating }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="row p-1">
            {% for image in food_images %}
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 p-3 bg-light text-dark">
                    <p>{{ image.food.name }}</p>
                    <div class="thumbnail">
                        <a href="{{ image.image.image.url }}">
                            <img src="{{ image.image.thumb.url }}" alt="Lights" style="width:100%">
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center p-3">
        <div class="p-3 bg-light text-dark">
            <p>Date joined: {{ date_joined.strftime("%d.%m.%Y") }}</p>
            <p>Last Login: {{ last_login.strftime("%d.%m.%Y") }}</p>
        </div>
    </div>
{% endblock %}