104 lines
5.2 KiB
HTML
104 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Edit Club - HKFC Men's C Team</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Edit Club #{{ club_id }}</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST">
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div class="mb-3">
|
|
{{ form.hockey_club.label(class="form-label") }}
|
|
{{ form.hockey_club(class="form-control") }}
|
|
{% if form.hockey_club.errors %}
|
|
<div class="text-danger">
|
|
{% for error in form.hockey_club.errors %}
|
|
<small>{{ error }}</small>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
{{ form.logo_url.label(class="form-label") }}
|
|
{{ form.logo_url(class="form-control", id="logoUrl", onchange="previewLogo()") }}
|
|
{% if form.logo_url.errors %}
|
|
<div class="text-danger">
|
|
{% for error in form.logo_url.errors %}
|
|
<small>{{ error }}</small>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<small class="form-text text-muted">Enter the full URL to the club's logo image</small>
|
|
|
|
<!-- Logo Preview -->
|
|
<div id="logoPreview" class="mt-2" style="display: none;">
|
|
<label class="form-label small">Preview:</label>
|
|
<div class="border rounded p-2 bg-light">
|
|
<img id="previewImage" src="" alt="Logo preview" style="max-height: 80px; max-width: 120px;" onerror="this.style.display='none'; document.getElementById('previewError').style.display='block';" onload="document.getElementById('previewError').style.display='none';">
|
|
<div id="previewError" class="text-muted small" style="display: none;">Unable to load image</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
|
{{ form.cancel(class="btn btn-secondary me-md-2") }}
|
|
{{ form.save_club(class="btn btn-primary") }}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<a href="/admin/clubs" class="btn btn-outline-secondary">Back to Club Management</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
function previewLogo() {
|
|
const urlInput = document.getElementById('logoUrl');
|
|
const previewDiv = document.getElementById('logoPreview');
|
|
const previewImg = document.getElementById('previewImage');
|
|
|
|
if (urlInput.value.trim()) {
|
|
previewImg.src = urlInput.value;
|
|
previewDiv.style.display = 'block';
|
|
} else {
|
|
previewDiv.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Preview logo on page load if URL is already filled
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
previewLogo();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|