{{define "content"}}
<article class="contact-page">
    <h1>Contact Us</h1>
    
    <div class="contact-links" style="margin-bottom: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 8px;">
        <h2 style="margin-top: 0; font-size: 1.2rem;">Find us elsewhere:</h2>
        <ul style="list-style: none; padding: 0; margin: 0;">
            <li style="margin-bottom: 0.5rem;">
                <a href="https://aitherboard.imwald.eu/repos/naddr1qvzqqqrhnypzplfq3m5v3u5r0q9f255fdeyz8nyac6lagssx8zy4wugxjs8ajf7pqq9xw6t5vd5hgctyv4kqde47kt?tab=about" target="_blank" rel="noopener noreferrer" style="color: #0066cc; text-decoration: none;">
                    📦 Aitherboard Repository
                </a>
            </li>
            <li style="margin-bottom: 0.5rem;">
                <a href="https://github.com/ShadowySupercode" target="_blank" rel="noopener noreferrer" style="color: #0066cc; text-decoration: none;">
                    🐙 GitHub: ShadowySupercode
                </a>
            </li>
        </ul>
    </div>

    {{if .Profile}}
    <div class="nostr-profile" style="margin-bottom: 2rem; padding: 1rem; background: #f9f9f9; border-radius: 8px; border: 1px solid #ddd;">
        <h2 style="margin-top: 0; font-size: 1.2rem;">Nostr Profile</h2>
        <div style="display: flex; gap: 1rem; align-items: flex-start;">
            {{if .Profile.Picture}}
            <img src="{{.Profile.Picture}}" alt="Profile picture" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">
            {{end}}
            <div style="flex: 1;">
                <h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem;">
                    {{if .Profile.DisplayName}}{{.Profile.DisplayName}}{{else if .Profile.Name}}{{.Profile.Name}}{{else}}Anonymous{{end}}
                </h3>
                {{if .Profile.Name}}
                <p style="margin: 0 0 0.5rem 0; color: #666; font-size: 0.9rem;">@{{.Profile.Name}}</p>
                {{end}}
                {{if .Profile.About}}
                <p style="margin: 0 0 0.5rem 0; white-space: pre-wrap;">{{.Profile.About}}</p>
                {{end}}
                {{if .Profile.Website}}
                <p style="margin: 0.5rem 0 0 0;">
                    <a href="{{.Profile.Website}}" target="_blank" rel="noopener noreferrer" style="color: #0066cc; text-decoration: none;">🌐 Website</a>
                </p>
                {{end}}
                {{if .Profile.NIP05}}
                <p style="margin: 0.5rem 0 0 0; color: #666; font-size: 0.9rem;">NIP-05: {{.Profile.NIP05}}</p>
                {{end}}
            </div>
        </div>
    </div>
    {{end}}
    
    <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}}
    {{template "alert-error" .Error}}
    {{end}}
    
    <form id="contact-form" method="POST" action="/contact" class="contact-form">
        <div id="nostr-status" class="alert" style="display: none;"></div>
        
        <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" id="submit-btn" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-secondary">Clear</button>
        </div>
    </form>
    
    {{if .RepoAnnouncement}}
    <script type="application/json" id="repo-announcement-data">{{json .RepoAnnouncement}}</script>
    {{end}}
    
    <script>
    (function() {
        const form = document.getElementById('contact-form');
        const submitBtn = document.getElementById('submit-btn');
        const statusDiv = document.getElementById('nostr-status');
        
        // Get repo announcement data from JSON script tag
        let repoAnnouncement = null;
        const repoDataEl = document.getElementById('repo-announcement-data');
        if (repoDataEl) {
            try {
                repoAnnouncement = JSON.parse(repoDataEl.textContent);
            } catch (e) {
                console.error('Failed to parse repo announcement data:', e);
            }
        }
        
        function showStatus(message, isError) {
            statusDiv.textContent = message;
            statusDiv.className = 'alert ' + (isError ? 'alert-error' : 'alert-success');
            statusDiv.style.display = 'block';
        }
        
        function hideStatus() {
            statusDiv.style.display = 'none';
        }
        
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // Check if Nostr extension is available
            if (!window.nostr) {
                showStatus('Nostr extension not found. Please install a Nostr browser extension (e.g., nos2x, Alby) to submit issues.', true);
                return;
            }
            
            if (!repoAnnouncement) {
                showStatus('Repository configuration not available. Please try again later.', true);
                return;
            }
            
            const subject = document.getElementById('subject').value.trim();
            const content = document.getElementById('content').value.trim();
            const labelsStr = document.getElementById('labels').value.trim();
            
            if (!subject || !content) {
                showStatus('Subject and message are required.', true);
                return;
            }
            
            // Disable submit button
            submitBtn.disabled = true;
            submitBtn.textContent = 'Signing...';
            hideStatus();
            
            try {
                // Get user's public key
                const pubkey = await window.nostr.getPublicKey();
                
                // Parse labels
                const labels = labelsStr ? labelsStr.split(',').map(l => l.trim()).filter(l => l) : [];
                
                // Build event tags
                const tags = [];
                
                // Add 'a' tag for repository announcement
                tags.push(['a', `30617:${repoAnnouncement.pubkey}:${repoAnnouncement.dTag}`]);
                
                // Add 'p' tag for repository owner
                tags.push(['p', repoAnnouncement.pubkey]);
                
                // Add maintainers as 'p' tags
                if (repoAnnouncement.maintainers && repoAnnouncement.maintainers.length > 0) {
                    repoAnnouncement.maintainers.forEach(maintainer => {
                        tags.push(['p', maintainer]);
                    });
                }
                
                // Add subject tag
                if (subject) {
                    tags.push(['subject', subject]);
                }
                
                // Add label tags
                labels.forEach(label => {
                    if (label) {
                        tags.push(['t', label]);
                    }
                });
                
                // Add relays tag if available
                if (repoAnnouncement.relays && repoAnnouncement.relays.length > 0) {
                    tags.push(['relays', ...repoAnnouncement.relays]);
                }
                
                // Create unsigned event
                const unsignedEvent = {
                    kind: 1621,
                    pubkey: pubkey,
                    created_at: Math.floor(Date.now() / 1000),
                    tags: tags,
                    content: content
                };
                
                // Sign the event
                submitBtn.textContent = 'Publishing...';
                const signedEvent = await window.nostr.signEvent(unsignedEvent);
                
                // Send to API
                const response = await fetch('/api/contact', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ event: signedEvent })
                });
                
                const result = await response.json();
                
                if (response.ok && result.success) {
                    // Redirect to success page
                    window.location.href = '/contact?success=true&event_id=' + result.event_id;
                } else {
                    showStatus('Failed to publish issue: ' + (result.error || 'Unknown error'), true);
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Submit';
                }
            } catch (error) {
                console.error('Error:', error);
                showStatus('Error: ' + error.message, true);
                submitBtn.disabled = false;
                submitBtn.textContent = 'Submit';
            }
        });
    })();
    </script>
</article>
{{end}}

{{/* Feed is defined in components.html */}}