@include('front.include.start')
@include('front.include.header')
<style>
    .user-media {
        margin: 12% 0;
        display: flex;
        justify-content: space-around;
    }

    @media only screen and (max-width: 425px) {
        .user-media {
            margin: 28% 0;
            flex-wrap: wrap;
        }

        .profile-page p {
            text-align: center;
            font-size: 16px;
            padding: 0 25px;
        }

        .profile-page section, .profile-page {
            overflow: scroll;

        }

        .user-media img {

            width: 95%;
            border-radius: 14px;
            height: 95%;
        }

        .user-media video {

            width: 95%;
            border-radius: 14px;
            height: 95%;
            margin-top: 9rem;
        }

        .btn12 {

            padding: 0 25px;
        }

        a.btnn {

            width: 32%;
            height: 58px;
            font-size: 17px;
            line-height: 45px;
            padding: 0 31px;
        }

        .btnn.btn3 {
            width: auto;
            height: 58px;
            font-size: 17px;
            line-height: 45px;
            padding: 0 31px;
        }

        a.btnn svg {
            width: 20px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
        }

        .profile-page section, .profile-page {

        }
    }
</style>
<main class="profile-page">
    <span class="float-color float-color1"></span>
    <span class="float-color float-color2"></span>
    <span class="float-color float-color3"></span>
    <section>
        <div class="container">
            @foreach($user->userMedias as $value)
                @if($value->media_type == 'image')
                    <div>
                        <div class="user-media">
                            <img src="/upload/{{$value->path.'/'.$value->media_source}}" alt="">
                        </div>
                        <div class="btn12">
                            <a href="{{asset('/storage/app/image/'.  $user->image_name)}}" class="btnn btn2" download>
                                <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
                                    <g id="Group_449" data-name="Group 449" transform="translate(-432.165 -1419.031)">
                                        <g id="Group_382" data-name="Group 382" transform="translate(37.165 -106.969)">
                                            <g id="Rectangle_130" data-name="Rectangle 130"
                                               transform="translate(395 1526)" fill="none" stroke="#fff"
                                               stroke-width="3">
                                                <rect width="44" height="44" rx="8" stroke="none"/>
                                                <rect x="1.5" y="1.5" width="41" height="41" rx="6.5" fill="none"/>
                                            </g>
                                            <g id="Ellipse_19" data-name="Ellipse 19" transform="translate(407 1538)"
                                               fill="none" stroke="#fff" stroke-width="3">
                                                <circle cx="10" cy="10" r="10" stroke="none"/>
                                                <circle cx="10" cy="10" r="8.5" fill="none"/>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                دانلود عکس
                            </a>
                        </div>
                    </div>
                @endif
            @endforeach
            <div class="text">
                <p>
                    سلام! مرسی که این خاطره رو کنار لیلی ثبت کردی
                    !امـیداوریم که همـیشه شـادمــان بــاشی
                    اگر خواستی تو شبکه های اجتماعی بازنشرش کنی
                </p>
                <p>
                    #لیلی_ همونه و LEILI_SHIRINI@ !رو یادت نره
                </p>
            </div>

            <a href="https://hamooneh.leilishirini.com/" class="btnn btn3">
                <svg xmlns="http://www.w3.org/2000/svg" width="45.93" height="39.499" viewBox="0 0 45.93 39.499">
                    <path id="Path_1904" data-name="Path 1904"
                          d="M11.953,0c4.136.059,7.255,1.317,9.765,4,.678.726.692.72,1.411-.007A12.585,12.585,0,0,1,29.961.25a12.2,12.2,0,0,1,11.251,3.4A11.835,11.835,0,0,1,44.827,11a13.129,13.129,0,0,1-4.145,11.6q-7.007,6.57-14,13.151c-.677.635-1.333,1.3-2.063,1.871a3.381,3.381,0,0,1-4.389-.1c-1.806-1.6-3.549-3.279-5.312-4.931-3.36-3.15-6.705-6.315-10.076-9.453a13.7,13.7,0,0,1-4.113-6A13,13,0,0,1,1.958,5.886,12.016,12.016,0,0,1,11.953,0M42.207,12.057A10.029,10.029,0,0,0,39.88,6.072a9.847,9.847,0,0,0-13.842-.921c-1.075.967-2.145,1.941-3.164,2.965-.409.411-.609.338-.957-.039-.7-.759-1.454-1.467-2.182-2.2a9.6,9.6,0,0,0-8.27-3.06A9.409,9.409,0,0,0,4.173,7.352,10.7,10.7,0,0,0,6.317,20.916c2.044,1.834,4.027,3.735,6.035,5.609q4.71,4.395,9.419,8.791a.906.906,0,0,0,1.419,0q2.791-2.593,5.572-5.2c3.245-3.031,6.47-6.083,9.738-9.089a11.248,11.248,0,0,0,3.707-8.973"
                          transform="translate(0.501 0.5)" fill="#fff" stroke="#fff" stroke-width="1"/>
                </svg>
                نمایش همه خاطره های ثبت شده
            </a>

            <a href="" class="ex nav-link">
                خروج از حساب کاربری
            </a>

        </div>
    </section>
</main>
<style>

    .ex {
        display: inline-block;
        width: 100px;
        height: 50px;
        text-align: center;
        margin: 26px auto 0;
        color: #fff;
        background: #ec67a7;
        border-radius: 100px;
        line-height: 40px;
    }

    a.btnn {
        width: 38%;
        height: 46px;
        font-size: 12px;
        line-height: 40px;
        padding: 0 15px;
    }

    .btn12 {
        display: flex;
        justify-content: center;
        margin: 0rem 0 1rem;
    }

    .user-media {
        margin: 27% 0 0;
        flex-wrap: wrap;
        margin-bottom: 5rem;
        text-align: center;
    }
</style>

@include('front.include.footer')
@include('front.include.end')