<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;
    }
    
    .checkbox-custom {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .checkbox-custom input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        accent-color: var(--tennis-green);
    }
    
    .checkbox-custom label {
        font-weight: 500;
        color: var(--tennis-dark);
        margin-bottom: 0;
    }

    @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-building"></i> <span th:text="${club.uuid != null ? 'Редактирование клуба' : 'Новый теннисный клуб'}">Новый теннисный клуб</span>
        </h1>
    </div>
</div>

<div class="container">
    <div class="form-custom">
        <form th:action="${club.uuid != null ? '/home/clubs/' + club.uuid : '/home/clubs'}" th:method="${club.uuid != null ? 'post' : 'post'}" th:object="${club}">
            
            <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="*{name}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label-custom">Телефон</label>
                    <input type="tel" class="form-control form-control-custom" th:field="*{phone}">
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label-custom">Email</label>
                    <input type="email" class="form-control form-control-custom" th:field="*{email}">
                </div>
                <div class="col-md-6">
                    <label class="form-label-custom">Веб-сайт</label>
                    <input type="url" class="form-control form-control-custom" th:field="*{website}" placeholder="https://example.com">
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label-custom">Адрес</label>
                <input type="text" class="form-control form-control-custom" th:field="*{address}">
            </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-4">
                    <label class="form-label-custom">Количество кортов</label>
                    <input type="number" class="form-control form-control-custom" th:field="*{courtCount}" 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="*{hourlyPrice}" min="0" step="0.01">
                </div>
                <div class="col-md-4">
                    <label class="form-label-custom">URL изображения</label>
                    <input type="url" class="form-control form-control-custom" th:field="*{imageUrl}">
                </div>
            </div>
            
            <div class="mb-4">
                <h5 class="mb-3">Удобства</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="checkbox-custom">
                            <input type="checkbox" th:field="*{indoor}">
                            <label th:for="*{indoor}">Закрытые корты</label>
                        </div>
                        <div class="checkbox-custom">
                            <input type="checkbox" th:field="*{outdoor}">
                            <label th:for="*{outdoor}">Открытые корты</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="checkbox-custom">
                            <input type="checkbox" th:field="*{lighting}">
                            <label th:for="*{lighting}">Освещение</label>
                        </div>
                        <div class="checkbox-custom">
                            <input type="checkbox" th:field="*{parking}">
                            <label th:for="*{parking}">Парковка</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="checkbox-custom">
                            <input type="checkbox" th:field="*{lockerRoom}">
                            <label th:for="*{lockerRoom}">Раздевалки</label>
                        </div>
                        <div class="checkbox-custom">
                            <input type="checkbox" th:field="*{cafe}">
                            <label th:for="*{cafe}">Кафе</label>
                        </div>
                        <div class="checkbox-custom">
                            <input type="checkbox" th:field="*{proShop}">
                            <label th:for="*{proShop}">Магазин</label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <button type="submit" class="btn btn-tennis me-3">
                    <i class="bi bi-check-circle"></i> <span th:text="${club.id != null ? 'Сохранить' : 'Создать'}">Создать</span>
                </button>
                <a href="/home" class="btn btn-secondary-custom">
                    <i class="bi bi-arrow-left"></i> Отмена
                </a>
            </div>
        </form>
    </div>
</div>
