@extends('layouts.app')

@section('nav-bar-context-icon')

@endsection

@section('content')
<div class="container" style="margin-top:20px">
    <div class="row justify-content-center mb-5">
        <div class="col-md-12">
            <h1>{{ __('app.activity.profile.title.index') }}</h1>
            
            <div class="d-flex flex-row align-items-center mb-3">
                <div class="me-3">{{__('app.activity.profile.labels.name')}} : </div>
                <div>{{Auth::user()->name}}</div>
            </div>

            <div class="d-flex flex-row align-items-center mb-3">
                <div class="me-3">{{__('app.activity.profile.labels.email')}} : </div>
                <div>{{Auth::user()->email}}</div>
            </div>

            <div class="d-flex flex-row align-items-center mb-3">
                <div class="me-3">{{__('app.activity.profile.labels.lang')}} : </div>
                <div>
                    @if(Illuminate\Support\Facades\App::isLocale('en'))
                    <span class="px-2 bg-black text-white ">EN</span> <a class="ms-2 text-black link-underline link-underline-opacity-0" aria-current="page" href="{{route('lang',['locale' => 'fr'])}}"> FR</a></li>
                    @else
                    <span class="px-2 bg-black text-white ">FR</span> <a class="ms-2 text-black link-underline link-underline-opacity-0" aria-current="page" href="{{route('lang',['locale' => 'en'])}}"> EN</a></li>
                    @endif
                </div>
            </div>
            
            <div class="d-flex flex-row align-items-center mt-5">
                <div class="me-3">{{__('app.activity.profile.labels.avatar')}} : </div>
                <div>
                    <livewire:components.profile.profile-avatar />
                </div>
            </div>

            <div class="d-flex flex-row align-items-center mt-5">
                <div class="me-3">{{__('app.activity.profile.labels.color')}} : </div>
                <div>
                    <livewire:components.profile.profile-color />
                </div>
            </div>

        </div>
    </div>
</div>
@endsection