@php
    $hasCoords = $branch->latitude !== null && $branch->longitude !== null;
    $cityName = optional($branch->city)->city_name;
    $districtName = optional($branch->district)->district_name;
    $neighborhoodName = optional($branch->neighbourhood)->neighbourhood_name;
    $locationLine = collect([$cityName, $districtName])->filter()->implode(' / ');
    $isActive = (bool) $branch->status;
    $deactivateBlocked = $deactivateBlocked ?? false;
    $toggleBlocked = $isActive && $deactivateBlocked;
@endphp

<article
    class="fh-branch-item {{ $isActive ? 'is-active' : 'is-passive' }}"
    data-branch-id="{{ $branch->branch_id }}"
    data-branch-status="{{ $isActive ? '1' : '0' }}"
>
    <header class="fh-branch-item-head">
        <div class="fh-branch-item-title-wrap">
            <h3 class="fh-branch-item-title">{{ $branch->branch_name }}</h3>
            <span class="fh-branch-badge {{ $isActive ? 'is-active' : 'is-passive' }}" data-branch-badge>
                {{ $isActive ? __('ui.branches.active') : __('ui.branches.passive') }}
            </span>
        </div>
        @if ($hasCoords)
            <span class="fh-branch-item-location-icon" title="{{ __('ui.branches.has_location') }}" aria-hidden="true">
                <span class="material-symbols-outlined">location_on</span>
            </span>
        @endif
    </header>

    <div class="fh-branch-item-details">
        @if ($locationLine !== '')
            <div class="fh-branch-detail-row">
                <span class="material-symbols-outlined" aria-hidden="true">map</span>
                <span class="fh-branch-detail-text">{{ $locationLine }}</span>
            </div>
        @endif

        @if ($neighborhoodName)
            <div class="fh-branch-detail-row">
                <span class="material-symbols-outlined" aria-hidden="true">home_pin</span>
                <span class="fh-branch-detail-text">{{ $neighborhoodName }}</span>
            </div>
        @endif

        <div class="fh-branch-detail-row {{ $branch->address ? '' : 'is-muted' }}">
            <span class="material-symbols-outlined" aria-hidden="true">signpost</span>
            <span class="fh-branch-detail-text">
                {{ $branch->address ?: __('ui.branches.no_address') }}
            </span>
        </div>

        <div class="fh-branch-detail-row {{ $branch->branch_phone ? '' : 'is-muted' }}">
            <span class="material-symbols-outlined" aria-hidden="true">call</span>
            <span class="fh-branch-detail-text">
                {{ $branch->branch_phone ?: __('ui.branches.no_phone') }}
            </span>
        </div>

        @if (! empty($branch->opening_hours))
            <div class="fh-branch-detail-row">
                <span class="material-symbols-outlined" aria-hidden="true">schedule</span>
                <span class="fh-branch-detail-text">{{ $branch->opening_hours }}</span>
            </div>
        @endif

        @unless ($hasCoords)
            <div class="fh-branch-detail-row is-muted">
                <span class="material-symbols-outlined" aria-hidden="true">wrong_location</span>
                <span class="fh-branch-detail-text">{{ __('ui.branches.no_location') }}</span>
            </div>
        @endunless
    </div>

    <footer class="fh-branch-item-footer">
        <span class="fh-branch-updated">
            {{ __('ui.branches.updated_at', ['date' => $branch->updated_at?->format('d.m.Y H:i') ?? '—']) }}
        </span>

        <div class="fh-branch-actions fh-corp-table-actions__group">
            @if ($hasCoords)
                <button
                    type="button"
                    class="fh-corp-action-btn fh-corp-action-btn--preview js-branch-map-open"
                    data-lat="{{ $branch->latitude }}"
                    data-lng="{{ $branch->longitude }}"
                    data-name="{{ $branch->branch_name }}"
                    title="{{ __('ui.branches.view_btn') }}"
                    aria-label="{{ __('ui.branches.view_btn') }}"
                >
                    <span class="material-symbols-outlined fh-corp-action-btn__icon" aria-hidden="true">map</span>
                    <span class="fh-corp-action-btn__label">{{ __('ui.branches.view_btn') }}</span>
                </button>
            @else
                <span
                    class="fh-corp-action-btn fh-corp-action-btn--preview is-disabled"
                    title="{{ __('ui.branches.no_location') }}"
                    aria-disabled="true"
                >
                    <span class="material-symbols-outlined fh-corp-action-btn__icon" aria-hidden="true">map</span>
                    <span class="fh-corp-action-btn__label">{{ __('ui.branches.view_btn') }}</span>
                </span>
            @endif

            <a
                href="{{ route('account.branches.edit', $branch->branch_id) }}"
                class="fh-corp-action-btn fh-corp-action-btn--edit"
                title="{{ __('ui.branches.edit_btn') }}"
                aria-label="{{ __('ui.branches.edit_btn') }}"
            >
                <span class="material-symbols-outlined fh-corp-action-btn__icon" aria-hidden="true">edit</span>
                <span class="fh-corp-action-btn__label">{{ __('ui.branches.edit_btn') }}</span>
            </a>

            <button
                type="button"
                class="fh-corp-action-btn fh-corp-action-btn--toggle js-branch-toggle {{ $isActive ? '' : 'is-active-target' }}{{ $toggleBlocked ? ' is-disabled' : '' }}"
                data-toggle-url="{{ route('account.branches.toggle-status', $branch->branch_id) }}"
                data-branch-id="{{ $branch->branch_id }}"
                @disabled($toggleBlocked)
                title="{{ $toggleBlocked ? __('ui.branches.deactivate_blocked_has_campaigns') : ($isActive ? __('ui.branches.toggle_passive') : __('ui.branches.toggle_active')) }}"
                aria-label="{{ $toggleBlocked ? __('ui.branches.deactivate_blocked_has_campaigns') : ($isActive ? __('ui.branches.toggle_passive') : __('ui.branches.toggle_active')) }}"
            >
                <span class="material-symbols-outlined fh-corp-action-btn__icon" aria-hidden="true">
                    {{ $isActive ? 'toggle_off' : 'toggle_on' }}
                </span>
                <span class="fh-corp-action-btn__label" data-toggle-label>
                    {{ $isActive ? __('ui.branches.toggle_passive') : __('ui.branches.toggle_active') }}
                </span>
            </button>

            <button
                type="button"
                class="fh-corp-action-btn fh-corp-action-btn--danger js-branch-delete-open"
                title="{{ __('ui.branches.delete_btn') }}"
                aria-label="{{ __('ui.branches.delete_btn') }}"
                data-delete-url="{{ route('account.branches.destroy', $branch->branch_id) }}"
                data-branch-name="{{ $branch->branch_name }}"
            >
                <span class="material-symbols-outlined fh-corp-action-btn__icon" aria-hidden="true">delete</span>
                <span class="fh-corp-action-btn__label">{{ __('ui.branches.delete_btn') }}</span>
            </button>
        </div>
    </footer>
</article>