@extends('main.layouts.main')

@section('content')
    <div class="profile-top">
        <div class="avatar">
            <img src="assets/images/avatars/1.jpg" alt="">
            <ul class="have">
                <li title="Друзья">
                    <i class="fad fa-user-friends"></i>
                    <span>100</span>
                </li>
                <li title="Лайки">
                    <i class="fad fa-thumbs-up"></i>
                    <span>83</span>
                </li>
            </ul>
        </div>
        <div class="profile-right">
            <div class="info">
                <div class="top-info">
                    <h2>Михаил Протасевич <i class="fad fa-check verify" title="Этот пользователь верифицирован"></i></h2>
                    <span class="online">online</span>
                </div>
                <div class="profile-status">
                    <i class="fad fa-lightbulb-on"></i>
                    <span class="text">А что делать, если всё вот так вот..</span>
                </div>
                <ul class="about">
                    <li>
                        <span>Дата рождения:</span>
                        <p>24.12.1999</p>
                    </li>
                    <li>
                        <span>Город:</span>
                        <p>Красноярск</p>
                    </li>
                    <li>
                        <span>Род занятий:</span>
                        <p>Web-developer</p>
                    </li>
                    <li>
                        <span>О себе:</span>
                        <p>Я не понимаю, почему каждый из нас имеет свои собственные свойства, которые
                            по факты мы не определяем</p>
                    </li>
                </ul>
            </div>
            <form action="" class="form-create-post">
                <textarea rows="2" placeholder="О чём хотите рассказать?"></textarea>
                <button>
                    <i class="fad fa-paper-plane"></i>
                </button>
            </form>
            <ul class="posts">
                <li>
                    <div class="author-controllers">
                        <div style="display:flex; align-items:center;">
                            <img src="assets/images/avatars/1.jpg" alt="">
                            <p style="color: #ffffff;font-weight: 700;margin-left: 10px;">Протасевич Михаил</p>
                        </div>
                        <div class="controllers">
                            <i class="far fa-ellipsis-h"></i>
                            <ul>
                                <li><a href="#">Удалить</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Ad alias asperiores dolor earum eligendi error eum
                            facilis ipsa ipsam, odit quaerat quas quibusdam rerum
                            sequi ullam vero voluptates! Impedit, quaerat.</p>
                    </div>
                    <ul class="actions">
                        <li class="like">
                            <i class="far fa-heart"></i>
                            <span>9</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="author-controllers">
                        <div style="display:flex; align-items:center;">
                            <img src="assets/images/avatars/1.jpg" alt="">
                            <p style="color: #ffffff;font-weight: 700;margin-left: 10px;">Протасевич Михаил</p>
                        </div>
                        <div class="controllers">
                            <i class="far fa-ellipsis-h"></i>
                            <ul>
                                <li><a href="#">Удалить</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Ad alias asperiores dolor earum eligendi error eum
                            facilis ipsa ipsam, odit quaerat quas quibusdam rerum
                            sequi ullam vero voluptates! Impedit, quaerat.</p>
                    </div>
                    <ul class="actions">
                        <li class="like active">
                            <i class="fas fa-heart"></i>
                            <span>9</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="author-controllers">
                        <div style="display:flex; align-items:center;">
                            <img src="assets/images/avatars/1.jpg" alt="">
                            <p style="color: #ffffff;font-weight: 700;margin-left: 10px;">Протасевич Михаил</p>
                        </div>
                        <div class="controllers">
                            <i class="far fa-ellipsis-h"></i>
                            <ul>
                                <li><a href="#">Удалить</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Ad alias asperiores dolor earum eligendi error eum
                            facilis ipsa ipsam, odit quaerat quas quibusdam rerum
                            sequi ullam vero voluptates! Impedit, quaerat.</p>
                    </div>
                    <ul class="actions">
                        <li class="like active">
                            <i class="fas fa-heart"></i>
                            <span>9</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="author-controllers">
                        <div style="display:flex; align-items:center;">
                            <img src="assets/images/avatars/1.jpg" alt="">
                            <p style="color: #ffffff;font-weight: 700;margin-left: 10px;">Протасевич Михаил</p>
                        </div>
                        <div class="controllers">
                            <i class="far fa-ellipsis-h"></i>
                            <ul>
                                <li><a href="#">Удалить</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            Ad alias asperiores dolor earum eligendi error eum
                            facilis ipsa ipsam, odit quaerat quas quibusdam rerum
                            sequi ullam vero voluptates! Impedit, quaerat.</p>
                    </div>
                    <ul class="actions">
                        <li class="like active">
                            <i class="fas fa-heart"></i>
                            <span>9</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
@endsection