eatvio-infra/resources/views/profile/index.blade.php

@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">{{ __('profile.consultants') }}</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">{{ __('profile.blog') }}</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">{{ __('profile.settings') }}</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>
                        <p>{{ $user->is_consultant ? __('profile.is_consultant') : __('profile.is_user') }}</p>
                        @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">{{ __('profile.plans_passed') }}</span></div>
						<div><i class="--f_blue --f_bold fs-5">64</i><span class="nav-item">{{ __('profile.blog_posts') }}</span></div>
						<div><svg width="20" height="15"><use xlink:href="#Eye"></use></svg><span class="nav-item">{{ __('profile.views') }}: 2102</span></div>
						<div><svg width="17" height="14"><use xlink:href="#Heart"></use></svg><span class="nav-item">{{ __('profile.likes') }}: 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">
                    @livewire('profile.circumference-chart', ['user' => $user])
                    @livewire('profile.weight-chart', ['user' => $user])

					<div class="mb-4 p-3 --bg_white --shadow --radius --no_wrap">
						<div class="h5">{{ __('profile.passed_plans') }}:</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">{{ __('profile.easy') }}</td>
								<td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">{{ __('profile.done') }}</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">{{ __('profile.moderate') }}</td>
								<td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-success">{{ __('profile.done') }}</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">{{ __('profile.full') }}</td>
								<td class="w-50 text-end"><small class="px-3 py-1 badge rounded-pill bg-warning">{{ __('profile.in_the_process') }}</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">{{ __('profile.create_a_post') }}</a>
					</div>

					<div class="h4 my-3 --f_grey">{{ __('profile.all_posts') }}</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" />
								<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>
								{{ __('profile.comment') }}
							</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>
								{{ __('profile.like') }}
							</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">{{ __('profile.share') }}</span>
							</small></a>
						</div>

					</div>

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

	</section>
@endsection