{% extends "base.html" %}

{% block title %}Generate Email - Café Bach Email Generator{% endblock %}

{% block content %}
<div class="form-container">
    <h2>Create Email Invitation</h2>
    
    <form id="emailForm" class="email-form">
        <div class="form-group">
            <label for="title">Event Title *</label>
            <input type="text" id="title" name="title" required maxlength="100" placeholder="Enter event title">
            <span class="error-message" id="title-error"></span>
        </div>

        <div class="form-group">
            <label for="date_time">Date & Time *</label>
            <input type="datetime-local" id="date_time" name="date_time" required>
            <span class="error-message" id="date_time-error"></span>
        </div>

        <div class="form-group">
            <label for="location">Location *</label>
            <input type="text" id="location" name="location" required maxlength="200" placeholder="Enter location">
            <span class="error-message" id="location-error"></span>
        </div>

        <div class="form-group">
            <label for="description">Description *</label>
            <textarea id="description" name="description" required maxlength="2000" rows="5" placeholder="Describe the event..."></textarea>
            <span class="error-message" id="description-error"></span>
            <span class="char-count" id="desc-count">0/2000</span>
        </div>

        <div class="form-group">
            <label for="image_url">Image URL (Optional)</label>
            <input type="url" id="image_url" name="image_url" placeholder="https://example.com/image.jpg">
            <span class="error-message" id="image_url-error"></span>
        </div>

        <div class="form-group">
            <label for="button_text">Button Text *</label>
            <input type="text" id="button_text" name="button_text" required maxlength="50" placeholder="RSVP Now">
            <span class="error-message" id="button_text-error"></span>
        </div>

        <div class="form-group">
            <label for="button_url">Button URL *</label>
            <input type="url" id="button_url" name="button_url" required placeholder="https://example.com/rsvp">
            <span class="error-message" id="button_url-error"></span>
        </div>

        <div class="form-group">
            <label for="next_event_text">Next Event Text (Optional)</label>
            <input type="text" id="next_event_text" name="next_event_text" maxlength="100" placeholder="Next event text">
        </div>

        <div class="form-group">
            <label for="next_event_url">Next Event URL (Optional)</label>
            <input type="url" id="next_event_url" name="next_event_url" placeholder="https://example.com/next-event">
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Generate Email</button>
            <button type="button" id="previewBtn" class="btn btn-secondary">Preview</button>
            <button type="reset" class="btn btn-outline">Clear Form</button>
        </div>
    </form>

    {% if data %}
    <div class="preview-section">
        <h2>Preview</h2>
        <div id="emailPreview" class="email-preview">
            <!-- Preview content will be rendered here -->
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% endblock %}