@extends('layouts/eatvio')

@section('main_section')
	<section class="py-5" id="main">
		<div class="container d-flex justify-content-between align-items-center mb-5 px-4 py-4 --bg_white --shadow --radius --mw-1000">
			<a href="#" class="d-flex align-items-center --f_bold --f_main"><svg width="17" height="16" class="me-2"><use xlink:href="#GoBack"></use></svg><span class="d-none d-md-inline">Консультанты</span></a>
			<div class="d-flex align-items-center">
				<a href="#" class="d-flex align-items-center me-4 --f_bold --f_main"><svg width="24" height="24" class="me-2"><use xlink:href="#Blog"></use></svg><span class="d-none d-md-inline">Блог</span></a>
                <a href="{{ route('user_detailz.show', ['user_detailz' => $user->detailz]) }}" class="d-flex align-items-center --f_bold --f_main"><svg width="24" height="24" class="me-2"><use xlink:href="#Settings"></use></svg><span class="d-none d-md-inline">Настройки</span></a>
			</div>
		</div>

		<div class="container mb-4 --mw-1000">
			<div class="row justify-content-between flex-lg-nowrap">
				<div class="col-lg-8 d-flex justify-content-between flex-column flex-sm-row me-lg-4 mb-4 mb-lg-0 px-3 py-4 --bg_white --shadow --radius --no_wrap">
                    @livewire('profile.photo-form', ['user' => $user])
                    <div class="flex-grow-1 --no_wrap_normal">
                        <div class="h3 --f_bold">{{ $user->name }}</div>
                        @livewire('profile.description-form', ['user' => $user])
                    </div>
                </div>
				<div class="col px-4 px-lg-5 py-4 --bg_white --shadow --radius --no_wrap flex-grow-1">
					<nav class="nav flex-column --menu_icons ps-4">
						<div><i class="--f_blue --f_bold fs-5">3</i><span class="nav-item">Планов пройдено</span></div>
						<div><i class="--f_blue --f_bold fs-5">64</i><span class="nav-item">Записей в блоге</span></div>
						<div><svg width="20" height="15"><use xlink:href="#Eye"></use></svg><span class="nav-item">Просмотров: 2102</span></div>
						<div><svg width="17" height="14"><use xlink:href="#Heart"></use></svg><span class="nav-item">Лайков: 128</span></div>
					</nav>
				</div>
			</div>
		</div>


		<div class="container mb-3 --mw-1000">
			<div class="row justify-content-between flex-lg-nowrap --mw-1000">
				<div class="col-lg-6 px-0 me-lg-4">
					<div class="mb-4 p-3 --bg_white --shadow --radius --no_wrap">
						<div class="d-flex justify-content-between align-items-center mb-2">
							<small class="--f_black">Обхват:</small>
							<div class="d-flex align-items-center">
								<small class="me-3">Грудь:<span class="ms-2 --f_bold --f_rose">90</span></small>
								<small class="me-3">Талия:<span class="ms-2 --f_bold --f_blue">60</span></small>
								<small>Бедра:<span class="ms-2 --f_bold --f_lime">90</span></small>
							</div>
                            						</div>
						<img src="/img/chart_1.svg" class="w-100"  />
					</div>

					<div class="mb-4 p-3 --bg_white --shadow --radius --no_wrap">
						<div class="d-flex justify-content-between align-items-center mb-2">
							<small class="--f_black">Вес:</small>
						<div class="d-flex align-items-center">
								<small class="me-3">Было:<span class="ms-2 --f_bold --f_gold">80</span></small>
								<small>Стало:<span class="ms-2 --f_bold --f_green">55</span></small>
							</div>
						</div>
						<img src="/img/chart_2.svg" class="w-100"  />
					</div>

					<div class="mb-4 p-3 --bg_white --shadow --radius --no_wrap">
						<div class="h5">Пройденные планы:</div>
						<hr/>
						<table class="table --table_blue mb-0 fs-4_5 --f_bold"><tbody>
							<tr>
								<td><img src="/img/plan_1.png" class="--radius_100" width="26px" height="26px"  /></td>
								<td class="w-50 text-start ps-0">Лёгкий</td>
								<td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">Готов</small></td>
							</tr>
							<tr>
								<td><img src="/img/plan_2.png" class="--radius_100" width="26px" height="26px"  /></td>
								<td class="w-50 text-start ps-0">Умеренный</td>
								<td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">Готов</small></td>
							</tr>
							<tr>
								<td><img src="/img/plan_3.png" class="--radius_100" width="26px" height="26px"  /></td>
								<td class="w-50 text-start ps-0">Полный</td>
								<td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-warning">В процессе</small></td>
							</tr>
						</tbody></table>
					</div>

				</div>
				<div class="col px-0 --no_wrap flex-grow-1">


					<div class="p-3 --bg_white --shadow --radius --no_wrap">
						<a href="#" class="btn btn-lg btn_light --btn_light_color btn-block w-100 --f_bold">Создать публикацию</a>
					</div>

					<div class="h4 my-3 --f_grey">ВСЕ ПУБЛИКАЦИИ</div>

					<div class="p-3 --bg_white --shadow --radius --no_wrap">

						<div class="d-flex mb-4 align-items-center justify-content-between">
							<div class="d-flex align-items-center">
								<img src="/img/profile_1.png" width="42px" height="42px" class="me-2 --radius_100 w-100" />
								<small>
									<span class="d-block --f_bold lh-1">Анна Власова</span>
									<span class="--f_grey">Вчера в 12:11</span>
								</small>
							</div>

							<ul class="navbar-nav" style="--bs-scroll-height:100px;">
								<li class="nav-item dropdown">
									<a id="dLabel" class="nav-link py-0 dropdown-toggle-js" href="#" data-bs-toggle="dropdown" aria-expanded="false" role="button">
										<svg width="18" height="4"><use xlink:href="#Dots"></use></svg>
									</a>
									<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown" aria-labelledby="dLabel">
										<li><a class="dropdown-item" href="#">Действие</a></li>
										<li><a class="dropdown-item" href="#">Другое действие</a></li>
										<li><hr class="dropdown-divider"></li>
										<li><a class="dropdown-item" href="#">Что-то еще</a></li>
									</ul>
								</li>
							</ul>
						</div>

						<div class="h6 --f_bold --no_wrap_normal">10 Trending Nutrition Research Articles of 2021</div>
						<small class="d-block --no_wrap_normal my-3">As 2020 begins, we took a look back at nutrition in the news during 2019. The most popular diet search according to Google was intermittent fasting...</small>
						<div class="post_img position-relative">
							<img src="/img/publik_1.png" class="w-100" />
							<div class="post_v_l w-100 d-flex justify-content-center align-items-center position-absolute --f_white">
								<svg width="20" height="14" class="me-2"><use xlink:href="#Eye_White"></use></svg>
								<span class="me-3">200</span>
								<svg width="16" height="14" class="me-2"><use xlink:href="#Heart_White"></use></svg>
								<span class="me-3">64</span>
							</div>
						</div>

						<div class="d-flex mt-3 align-items-center justify-content-between --f_bold">
							<a href="#" class="d-flex align-items-center --f_main"><small>
								<svg width="21" height="20" class="me-1"><use xlink:href="#ActionComment"></use></svg>
								Комментировать
							</small></a>

							<a href="#" class="d-flex align-items-center --f_main"><small>
								<svg width="24" height="21" class="me-1"><use xlink:href="#HeartPath"></use></svg>
								Нравится
							</small></a>

							<a href="#" class="d-flex align-items-center --f_main"><small>
								<svg width="21" height="22" class="me-1"><use xlink:href="#Share"></use></svg>
								<span class="d-none d-sm-inline">Поделится</span>
							</small></a>
						</div>

					</div>

				</div>
			</div>
		</div>

	</section>
@endsection