forked from eatvio/eatvio-infra
35 lines
2.3 KiB
PHP
35 lines
2.3 KiB
PHP
<div class="main_profile me-3" x-data="{photoName: null, photoPreview: null}">
|
||
@if(auth()->user()->id === $user->id)
|
||
<form>
|
||
<input type="file" class="hidden"
|
||
wire:model="photo"
|
||
x-ref="photo"
|
||
x-on:change="
|
||
photoName = $refs.photo.files[0].name;
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
photoPreview = e.target.result;
|
||
};
|
||
reader.readAsDataURL($refs.photo.files[0]);
|
||
" />
|
||
</form>
|
||
@endif
|
||
<div class="px-2">
|
||
<div class="profile_img mx-auto --radius_100 overflow-hidden" x-show="! photoPreview">
|
||
<img src="{{ $this->user->profile_photo_url }}" style="height: 130px;"/>
|
||
</div>
|
||
<div class="profile_img mx-auto --radius_100 overflow-hidden" x-show="photoPreview" style="display: none;">
|
||
<span class="block rounded-full w-32 h-32 bg-cover bg-no-repeat bg-center"
|
||
x-bind:style="'background-image: url(\'' + photoPreview + '\');'">
|
||
</span>
|
||
</div>
|
||
|
||
@if(auth()->user()->id === $user->id)
|
||
<button type="button" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25 transition mt-2 mr-2" x-on:click.prevent="$refs.photo.click()">{{ __('profile.change_photo') }}</button>
|
||
@endif
|
||
<small class="d-flex align-items-center my-2"><svg width="10" height="10" class="me-2"><use xlink:href="#TimeSmall"></use></svg>с {{ $this->user->created_at->isoFormat('LL') }}</small>
|
||
<small class="d-flex align-items-center my-2"><svg width="10" height="10" class="me-2" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="4" fill="{{ $isOnline ? "#00ff00" : "#7B8794" }}"/></svg> {{ $isOnline ? __('profile.is_online') : __('profile.is_offline')}}</small>
|
||
<img src="/img/checklist_1.png" class="my-3" />
|
||
</div>
|
||
</div>
|