@section('title', __('general.page_emails_title'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/emails.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.top_menu_item_general')],
        ['label' => __('general.page_emails_h1')],
    ];

    $webmail = 'https://' . ($siteData->domain ?: $siteData->subdomain . '.' . ($serverSite->name ?? '')) . ':2096/';
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('general.page_emails_h1') }}</h1>
            <p class="page-sub">{{ __('general.emails_intro') }}</p>
        </div>

        <div class="page-head__acts">
            <a class="btn btn--ghost" href="{{ $webmail }}" target="_blank" rel="noopener">
                <i class="fa-solid fa-right-to-bracket"></i> {{ __('general.emails_webmail') }}
            </a>
            <a class="btn btn--primary" id="mnew" href="{{ route('emails.c') }}" hidden>
                <i class="fa-solid fa-plus"></i> {{ __('general.emails_create') }}
            </a>
        </div>
    </header>

    @include('includes.flash')

    <section class="mquota" id="mquota"
             data-one="{{ trans_choice('general.emails_of_limit', 1, ['used' => ':used', 'limit' => ':limit']) }}"
             data-many="{{ trans_choice('general.emails_of_limit', 2, ['used' => ':used', 'limit' => ':limit']) }}"
             data-msg-limit="{{ __('general.emails_limit_reached') }}">
        <div class="mquota__text">
            <strong class="mquota__n"><span class="sk__bar mquota__sk"></span></strong>
            <span class="mquota__note" hidden></span>
        </div>
        <span class="mquota__bar">
            <span class="mquota__fill" style="width: 0"></span>
        </span>
    </section>

    <div class="mlist"
         data-state-url="{{ route('emails.state') }}"
         data-show-url="{{ route('emails.r.do', '__NAME__') }}"
         data-edit-url="{{ route('emails.u', '__NAME__') }}"
         data-delete-url="{{ route('emails.d', '__NAME__') }}"
         data-forget-url="{{ route('emails.forget', '__NAME__') }}"
         data-retry="{{ $retrySeconds }}"
         data-msg-checking="{{ __('general.emails_checking') }}"
         data-msg-missing="{{ __('general.emails_state_missing') }}"
         data-msg-unchecked="{{ __('general.emails_state_unchecked') }}"
         data-msg-full="{{ __('general.emails_state_full') }}"
         data-msg-note="{{ __('general.emails_unchecked_note') }}"
         data-msg-load="{{ __('general.emails_load_error') }}"
         data-msg-delete-title="{{ __('general.emails_remove_title') }}"
         data-msg-delete-text="{{ __('general.emails_remove_text') }}"
         data-msg-delete-btn="{{ __('site.btn_remove') }}"
         data-msg-forget-title="{{ __('general.emails_forget_title') }}"
         data-msg-forget-text="{{ __('general.emails_forget_text') }}"
         data-msg-forget-btn="{{ __('general.emails_forget') }}">

        @for($i = 0; $i < 2; $i++)
            <section class="mcard is-skel" aria-hidden="true">
                <span class="sk__bar mcard__skico"></span>
                <div class="mcard__text">
                    <span class="sk__bar mcard__skname"></span>
                    <span class="sk__bar mcard__skdisk"></span>
                </div>
                <div class="mcard__acts">
                    <span class="sk__bar mcard__skact"></span>
                    <span class="sk__bar mcard__skact"></span>
                    <span class="sk__bar mcard__skact"></span>
                </div>
            </section>
        @endfor
    </div>

    <template id="mcardTpl">
        <section class="mcard">
            <span class="mcard__ico"><i class="fa-solid fa-envelope"></i></span>

            <div class="mcard__text">
                <strong class="mcard__name"></strong>
                <span class="mcard__disk">
                    <span>{{ __('general.emails_disk_used') }}: <span class="mcard__human"></span></span>
                    <span class="mcard__bar" hidden><span class="mcard__fill"></span></span>
                </span>
                <span class="mcard__state" hidden></span>
            </div>

            <div class="mcard__acts">
                <a class="pact pact--perm mcard__show" title="{{ __('general.emails_settings') }}" aria-label="{{ __('general.emails_settings') }}">
                    <i class="fa-solid fa-gear"></i>
                </a>
                <a class="pact pact--edit mcard__edit" title="{{ __('general.emails_change_pass') }}" aria-label="{{ __('general.emails_change_pass') }}">
                    <i class="fa-solid fa-key"></i>
                </a>
                <button class="pact pact--del mcard__del" type="button" title="{{ __('site.btn_remove') }}" aria-label="{{ __('site.btn_remove') }}">
                    <i class="fa-solid fa-trash"></i>
                </button>
                <button class="btn btn--ghost mcard__forget" type="button" hidden>
                    <i class="fa-solid fa-xmark"></i> {{ __('general.emails_forget') }}
                </button>
            </div>

            <form class="mcard__form" method="POST">@csrf @method('DELETE')</form>
            <form class="mcard__forgetform" method="POST">@csrf</form>
        </section>
    </template>

    <template id="memptyTpl">
        <div class="admempty">
            <span class="apierr__ico"><i class="fa-solid fa-envelope-open"></i></span>
            <p class="apierr__text">{{ __('general.emails_empty') }}</p>
            <a class="btn btn--primary mempty__new" href="{{ route('emails.c') }}" hidden>
                <i class="fa-solid fa-plus"></i> {{ __('general.emails_create') }}
            </a>
        </div>
    </template>

    <template id="mfailTpl">
        <div class="apierr mfail">
            <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
            <p class="apierr__text"></p>
        </div>
    </template>

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/site-emails.js') }}"></script>
@endsection

@include('includes/footer-novo')