<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Club - Social Reading App</title>
    {% load static %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
</head>
<body>

    <div class="hero-section">
        <div class="container">
            <h1 class="display-4">Welcome to the Book Club</h1>
            <p class="lead">Create or join a book club, discuss your favorite books, and connect with fellow readers.</p>
            <a href="{% url 'club_list' %}" class="btn btn-primary btn-lg">Join a Club</a>
        </div>
    </div>

    <div class="container my-5">
        <div class="row">
            <div class="col-md-4">
                <div class="feature-box">
                    <h3>Create a Club</h3>
                    <p>Start your own book club and invite your friends to join.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box">
                    <h3>Choose Your Books</h3>
                    <p>Select from a wide range of books or recommend new ones.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box">
                    <h3>Join the Discussion</h3>
                    <p>Share your thoughts, write reviews, and engage in discussions.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5">
        <div class="recommendation-form">
            <h2>Recommend a Book</h2>
            {% if submitted %}
                <div class="alert alert-success" role="alert">
                    Thank you for your recommendation!
                </div>
            {% endif %}
            {% if captcha_error %}
                <div class="alert alert-danger" role="alert">
                    Incorrect CAPTCHA. Please try again.
                </div>
            {% endif %}
            <form method="POST">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="club" class="form-label">Select a Club</label>
                    <select class="form-select" id="club" name="club">
                        {% for club in clubs %}
                            <option value="{{ club.id }}">{{ club.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label for="book_title" class="form-label">Book Title</label>
                    <input type="text" class="form-control" id="book_title" name="book_title" required>
                </div>
                <div class="mb-3">
                    <label for="author" class="form-label">Author</label>
                    <input type="text" class="form-control" id="author" name="author" required>
                </div>
                <div class="mb-3">
                    <label for="reason" class="form-label">Reason for Recommendation</label>
                    <textarea class="form-control" id="reason" name="reason" rows="3" required></textarea>
                </div>
                <div class="mb-3">
                    <label for="captcha" class="form-label">What is {{ num1 }} + {{ num2 }}?</label>
                    <input type="hidden" name="num1" value="{{ num1 }}">
                    <input type="hidden" name="num2" value="{{ num2 }}">
                    <input type="text" class="form-control" id="captcha" name="captcha" required>
                </div>
                <button type="submit" class="btn btn-primary">Submit Recommendation</button>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
