@extends('layout')
@section('title', __('store.emailhosting_mailboxes'))
@section('content')
<div class="container py-4" id="emailPanel"
     data-handle-url="{{ route('store.auth.services.action.handle', [$service->id, 'mailboxes']) }}"
     data-csrf="{{ csrf_token() }}">
    <x-clientarea.page-header icon="fas fa-inbox" :title="__('store.emailhosting_mailboxes')">
        <a href="{{ route('store.auth.services.details', $service->id) }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>{{ __('store.common_back') }}
        </a>
    </x-clientarea.page-header>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body">
            <form id="mailboxAddForm" class="row g-2">
                <div class="col-md-5"><input type="email" class="form-control" name="email" placeholder="posta@alan.com" required></div>
                <div class="col-md-3"><input type="password" class="form-control" name="password" placeholder="{{ __('store.emailhosting_password') }}"></div>
                <div class="col-md-2"><input type="number" class="form-control" name="quota_mb" value="1024" min="0"></div>
                <div class="col-md-2 d-grid"><button class="btn btn-primary" type="submit">{{ __('store.emailhosting_add') }}</button></div>
            </form>
        </div>
    </div>

    <div id="mailboxAlert"></div>
    <div class="card shadow-sm border-0">
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead><tr><th>{{ __('store.emailhosting_mailbox') }}</th><th>{{ __('store.emailhosting_quota') }}</th><th></th></tr></thead>
                <tbody id="mailboxRows"><tr><td colspan="3" class="text-muted text-center py-3">…</td></tr></tbody>
            </table>
        </div>
    </div>
</div>
@endsection
@push('scripts')
@vite('resources/js/store/emailhosting/mailboxes.js')
@endpush
