<style>
    :root {
        --tennis-green: #2ecc71;
        --tennis-blue: #3498db;
        --tennis-orange: #e67e22;
        --tennis-dark: #2c3e50;
        --tennis-light: #ecf0f1;
    }
    
    .admin-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 60px 0;
        margin-bottom: 40px;
    }
    
    .form-custom {
        background: white;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        max-width: 800px;
        margin: 0 auto;
    }
    
    .form-title {
        font-size: 2rem;
        font-weight: 800;
        color: var(--tennis-dark);
        margin-bottom: 30px;
        text-align: center;
    }
    
    .form-control-custom {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 12px;
        transition: border-color 0.3s;
    }
    
    .form-control-custom:focus {
        border-color: var(--tennis-green);
        box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25);
    }
    
    .btn-tennis {
        background: var(--tennis-green);
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .btn-tennis:hover {
        background: #27ae60;
        color: white;
        transform: translateY(-2px);
    }
    
    .btn-secondary-custom {
        background: #95a5a6;
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        font-weight: 600;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-block;
    }
    
    .btn-secondary-custom:hover {
        background: #7f8c8d;
        color: white;
        transform: translateY(-2px);
    }
    
    .form-label-custom {
        font-weight: 600;
        color: var(--tennis-dark);
        margin-bottom: 8px;
    }

    @media (max-width: 767px) {
        .admin-section {
            padding: 35px 0;
        }
        .form-custom {
            padding: 20px 14px;
            border-radius: 10px;
        }
    }
</style>

<div class="admin-section">
    <div class="container">
        <h1 class="admin-title">
            <i class="bi bi-calendar-event"></i> <span th:text="${event.uuid != null ? 'Редактирование мероприятия' : 'Новое мероприятие'}">Новое мероприятие</span>
        </h1>
    </div>
</div>

<div class="container">
    <div class="form-custom">
        <form th:action="${event.uuid != null ? '/home/events/' + event.uuid : '/home/events'}" th:method="${event.uuid != null ? 'post' : 'post'}" th:object="${event}">
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label-custom">Название мероприятия *</label>
                    <input type="text" class="form-control form-control-custom" th:field="*{title}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label-custom">Теннисный клуб *</label>
                    <select class="form-control form-control-custom" th:field="*{clubId}" required>
                        <option value="">Выберите клуб</option>
                        <option th:each="club : ${clubs}" th:value="${club.uuid}" th:text="${club.name}">Название клуба</option>
                    </select>
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label-custom">Тип мероприятия *</label>
                    <select class="form-control form-control-custom" th:field="*{type}" required>
                        <option value="">Выберите тип</option>
                        <option th:each="type : ${eventTypes}" th:value="${type}" th:text="${type.displayName}">Тип</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label-custom">Статус</label>
                    <select class="form-control form-control-custom" th:field="*{status}">
                        <option th:each="status : ${eventStatuses}" th:value="${status}" th:text="${status.displayName}">Статус</option>
                    </select>
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label-custom">Описание</label>
                <textarea class="form-control form-control-custom" th:field="*{description}" rows="4"></textarea>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label-custom">Дата и время начала *</label>
                    <input type="datetime-local" class="form-control form-control-custom" th:field="*{startDateTime}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label-custom">Дата и время окончания</label>
                    <input type="datetime-local" class="form-control form-control-custom" th:field="*{endDateTime}">
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label-custom">Макс. участников</label>
                    <input type="number" class="form-control form-control-custom" th:field="*{maxParticipants}" min="1">
                </div>
                <div class="col-md-4">
                    <label class="form-label-custom">Текущие участники</label>
                    <input type="number" class="form-control form-control-custom" th:field="*{currentParticipants}" min="0">
                </div>
                <div class="col-md-4">
                    <label class="form-label-custom">Цена (руб)</label>
                    <input type="number" class="form-control form-control-custom" th:field="*{price}" min="0" step="0.01">
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label-custom">Контактное лицо</label>
                    <input type="text" class="form-control form-control-custom" th:field="*{contactPerson}">
                </div>
                <div class="col-md-6">
                    <label class="form-label-custom">Контактный телефон</label>
                    <input type="tel" class="form-control form-control-custom" th:field="*{contactPhone}">
                </div>
            </div>
            
            <div class="mb-4">
                <label class="form-label-custom">Требования к участникам</label>
                <textarea class="form-control form-control-custom" th:field="*{requirements}" rows="3" placeholder="Например: уровень игры, возраст, оборудование и т.д."></textarea>
            </div>
            
            <div class="mb-4">
                <label class="form-label-custom">URL изображения</label>
                <input type="url" class="form-control form-control-custom" th:field="*{imageUrl}" placeholder="https://example.com/image.jpg">
            </div>
            
            <div class="text-center">
                <button type="submit" class="btn btn-tennis me-3">
                    <i class="bi bi-check-circle"></i> <span th:text="${event.uuid != null ? 'Сохранить' : 'Создать'}">Создать</span>
                </button>
                <a href="/home" class="btn btn-secondary-custom">
                    <i class="bi bi-arrow-left"></i> Отмена
                </a>
            </div>
        </form>
    </div>
</div>
