{% extends 'base_generic.html' %}

{% block content %}
<style>
    .profileContent {
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .products {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

    .product {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 30px 30px;
        gap: 15px;
        box-shadow: #dadada 3px 3px 3px ;
    }

</style>
 <div class="profileContent">
     {% if user.is_authenticated %}
    <h2>Профиль пользователя: {{user.username}}</h2>
    <p><img class="img" src="{{user.photo.url}}"></p>
    <h3>Заказы пользователя:</h3>
    {% if orders %}
      <div class="products">
          {% for order in orders %}
            <div class="product">
            <p>{{order.product.name}}</p>
            <p>{{order.product.desc}}</p>
            <p><img class="img" src="/media/{{order.product.photo}}"></p>
            </div>
          {% endfor %}
      </div>
    {% else %}
      <p>У пользователя ещё нету заказов!</p>
    {% endif %}
  {% else %}
    <p>Вы не вошли в свой аккаунт!</p>
  {% endif %}
 </div>
{% endblock %}
