{{define "content"}}
<article class="contact-page">
    <h1>Contact Us</h1>
    <p>Have a question, suggestion, or want to report an issue? Fill out the form below and we'll get back to you.</p>
    
    {{if .Success}}
    <div class="alert alert-success" role="alert">
        <strong>Success!</strong> Your message has been submitted. Thank you for contacting us!
        {{if .EventID}}
        <br><small>Issue ID: {{.EventID}}</small>
        {{end}}
    </div>
    {{end}}
    
    {{if .Error}}
    <div class="alert alert-error" role="alert">
        <strong>Error:</strong> {{.Error}}
    </div>
    {{end}}
    
    <form method="POST" action="/contact" class="contact-form">
        <div class="form-group">
            <label for="subject">Subject <span class="required">*</span></label>
            <input type="text" id="subject" name="subject" required 
                   value="{{.FormData.Subject}}" 
                   placeholder="Brief description of your message"
                   aria-required="true">
        </div>
        
        <div class="form-group">
            <label for="content">Message <span class="required">*</span></label>
            <textarea id="content" name="content" rows="10" required 
                      placeholder="Please provide details about your question, suggestion, or issue..."
                      aria-required="true">{{.FormData.Content}}</textarea>
            <small class="form-help">You can use Markdown formatting in your message.</small>
        </div>
        
        <div class="form-group">
            <label for="labels">Labels (optional)</label>
            <input type="text" id="labels" name="labels" 
                   value="{{.FormData.Labels}}" 
                   placeholder="bug, feature-request, question (comma-separated)">
            <small class="form-help">Add labels to categorize your issue (comma-separated).</small>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-secondary">Clear</button>
        </div>
    </form>
</article>
{{end}}