{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}
{% import "posts/profile_card.html" as card %}
{% import "components/profile_card.html" as profile_card %}
{% import "components/profile_nav.html" as profile_nav %}

{% block title %}Мои посты{% endblock %}



{% block content %}
{{ header.section(user) }}
<section class="c_dg3k4">
    <div class="c_gtoe9">
        {{ profile_card.profile_card(user) }}
        <div class="c_ru432">
            {{ profile_nav.profile_nav(user, 'paint') }}
            <div class="c_3ihvi" id="main"><a class="c_ctfod b_289i1 ba" href="/form/post"><span class="c_d2l0b b_al8e7">Добавить</span></a></div>
            <div class="c_tihtk">
            {% for i in cards %}
                {{card.section(i, loop.index, user)}}
            {% endfor %}
            </div>
        </div>
    </div>
</section>
{{ card.scrips() }}
{{ footer.section(user) }}
{% endblock %}

{% block head %}
{{ header.style() }}
{{ card.style() }}

{{ profile_nav.style() }}
<style>

.b_rhmvx { border-radius: 1em; height: 140px; min-width: 140px; max-width: 100%; object-fit: cover; object-position: top;}


/* Mobile */
@media (max-width: 699px) {
.c_mrl59 { align-items: center; background: #5F1798; border-radius: 25px; bottom: -15px; display: flex; height: 50px; justify-content: center; position: absolute; right: -15px; width: 50px; }
.c_57hjd {width: 163px;}
.b_ya0t5 {height: auto;}
.c_dft7c {font-size: 14px;}
.c_spnyn {font-size: 12px;}
.c_l1ibo {font-size: 14px;}
.c_eiyz0 {font-size: 10px;}
.c_5uh64 {font-size: 8px;}
.c_tihtk {gap: 7px;}
}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_iiehk { align-items: center; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 335px; }
.c_nnsh6>a>img{display: none;}

}

/* Desktop */
@media (min-width: 901px) {
.c_iiehk { align-items: flex-end; border-radius: 5px; display: flex; flex-direction: column; gap: 20px; width: 310px; }
.c_nnsh6>a>img{display: none;}

}</style>
{{ footer.style() }}
{% endblock %}