<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\User $user
 */
?>
<style>
    .page-container {
        display: flex;
        justify-content: center;
        padding: 40px 20px;
    }
    .booking-style-wrapper {
        width: 100%;
        max-width: 600px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 28px;
        color: #333;
    }
    .booking-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }
    .booking-header h2 {
        margin: 0;
        font-size: 1.8rem;
        font-weight: bold;
        color: #1a202c;
    }
    .booking-header p {
        margin: 4px 0 0;
        color: #718096;
        font-size: 15px;
    }
    .form-group {
        margin-bottom: 18px;
    }
    .form-control {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 15px;
        outline: none;
    }
    .form-control:focus {
        border-color: #4263EB;
    }
    .btn-submit {
        background-color: #4263EB;
        color: #fff;
        padding: 10px 20px;
        border-radius: 8px;
        border: none;
        font-size: 15px;
        cursor: pointer;
    }
    .btn-back {
        background-color: #edf2f7;
        color: #2d3748;
        padding: 8px 14px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 14px;
    }
    .form-actions {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
    @media (max-width: 768px) {
        .page-container {
            padding: 20px 10px;
        }

        .booking-style-wrapper {
            padding: 20px;
        }

        .booking-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
    }
</style>
<div class="page-container">
    <div class="booking-style-wrapper">

        <div class="booking-header">
            <div>
                <h2><?= __('Add User') ?></h2>
                <p>Create a new user account</p>
            </div>
            <?= $this->Html->link(__('Back'), ['action' => 'index'], ['class' => 'btn-back']) ?>
        </div>
        <?= $this->Form->create($user) ?>
        <div class="form-group">
            <?= $this->Form->control('email', [
                'label' => 'Email',
                'class' => 'form-control'
            ]) ?>
        </div>
        <div class="form-group">
            <?= $this->Form->control('password', [
                'label' => 'Password',
                'class' => 'form-control'
            ]) ?>
        </div>
        <div class="form-group">
            <?= $this->Form->control('role', [
                'label' => 'Role',
                'type' => 'select',
                'options' => [
                    'admin' => 'Admin',
                    'staff' => 'Staff',
                    'client' => 'Client'
                ],
                'empty' => 'Select role',
                'class' => 'form-control'
            ]) ?>
        </div>
        <div class="form-actions">
            <?= $this->Form->button(__('Create User'), ['class' => 'btn-submit']) ?>
        </div>
        <?= $this->Form->end() ?>
    </div>
</div>
