{{define "content"}}
<div class="tab-layout">
    <!-- Top header area -->
    <div class="content-container">
        {{template "header" .}}
        {{template "storage-info" .}}
    </div>

    <!-- Tabs navigation -->
    <nav class="tab-nav" role="tablist" aria-label="Primary">
        <button class="tab-btn active" role="tab" aria-selected="true" aria-controls="tab-guide" id="tab-guide-btn" data-tab="guide">Guide</button>
        <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-upload" id="tab-upload-btn" data-tab="upload">Upload</button>
        <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-changelog" id="tab-changelog-btn" data-tab="changelog">Changelog</button>
        <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-about-btn" data-tab="about">About</button>
    </nav>

    <!-- Tab panels -->
    <div class="tab-panels">
        <section id="tab-guide" class="tab-panel active" role="tabpanel" aria-labelledby="tab-guide-btn">
            <div class="content-container">
                {{template "api-endpoints" .}}
                {{template "usage-examples" .}}
            </div>
        </section>

        <section id="tab-upload" class="tab-panel" role="tabpanel" aria-labelledby="tab-upload-btn" hidden>
            <div class="content-container">
                {{template "web-upload" .}}
            </div>
        </section>

        <section id="tab-changelog" class="tab-panel" role="tabpanel" aria-labelledby="tab-changelog-btn" hidden>
            <div class="content-container">
                {{template "changelog" .}}
            </div>
        </section>

        <section id="tab-about" class="tab-panel" role="tabpanel" aria-labelledby="tab-about-btn" hidden>
            <div class="content-container">
                <h2>About</h2>
                <div class="about-content">
                    <h3>What is FITRA?</h3>
                    <p>FITRA (File Transfer API) is a lightweight, developer-friendly file sharing service designed for CLI usage and automation.</p>
                    
                    <h3>🔒 Security</h3>
                    <p>Files are automatically deleted after 24 hours. This service is designed for temporary file sharing and should not be used for permanent storage.</p>
                    
                    <h3>📞 Support</h3>
                    <div class="contact-info">
                        <p><strong>Matrix:</strong> @root@adhd.sh</p>
                        <p><strong>Discord:</strong> nu11ed</p>
                    </div>
                    
                    <h3>💰 Donate</h3>
                    <div class="donate-info">
                        <div class="donation-item">
                            <div class="crypto-header">
                                <strong>BTC:</strong>
                                <button class="copy-crypto-btn" data-rybbit-event="Copy BTC" onclick="copyAddress('bc1ql2a3nxnhfwft7qex0cclj5ar2lfsslvs0aygeq', this)">Copy</button>
                            </div>
                            <div class="crypto-row">
                                <textarea class="crypto-address" readonly>bc1ql2a3nxnhfwft7qex0cclj5ar2lfsslvs0aygeq</textarea>
                            </div>
                        </div>
                        <div class="donation-item">
                            <div class="crypto-header">
                                <strong>LTC:</strong>
                                <button class="copy-crypto-btn" data-rybbit-event="Copy LTC" onclick="copyAddress('ltc1qhw5z0m6kcvs0u38nlesndmm3dzu49yrxyqyll9', this)">Copy</button>
                            </div>
                            <div class="crypto-row">
                                <textarea class="crypto-address" readonly>ltc1qhw5z0m6kcvs0u38nlesndmm3dzu49yrxyqyll9</textarea>
                            </div>
                        </div>
                        <div class="donation-item">
                            <div class="crypto-header">
                                <strong>ETH:</strong>
                                <button class="copy-crypto-btn" data-rybbit-event="Copy ETH" onclick="copyAddress('0x30843c72DF6E9A9226d967bf2403602f1C2aB67b', this)">Copy</button>
                            </div>
                            <div class="crypto-row">
                                <textarea class="crypto-address" readonly>0x30843c72DF6E9A9226d967bf2403602f1C2aB67b</textarea>
                            </div>
                        </div>
                    </div>

                    <script>
                    function copyAddress(address, button) {
                        if (address === '[XMR address]') {
                            button.textContent = 'N/A';
                            button.style.background = '#6b7280';
                            setTimeout(() => {
                                button.textContent = 'Copy';
                                button.style.background = '#22c55e';
                            }, 2000);
                            return;
                        }
                        
                        navigator.clipboard.writeText(address).then(() => {
                            button.textContent = '✓';
                            button.classList.add('copied');
                            setTimeout(() => {
                                button.textContent = 'Copy';
                                button.classList.remove('copied');
                            }, 2000);
                        }).catch(err => {
                            console.error('Failed to copy: ', err);
                            button.textContent = 'Error';
                            setTimeout(() => {
                                button.textContent = 'Copy';
                            }, 2000);
                        });
                    }
                    </script>

                    <h3>🌟 Features</h3>
                    <ul>
                        <li>Simple HTTP API for file upload/download</li>
                        <li>Automatic cleanup after 24 hours</li>
                        <li>Storage usage tracking</li>
                        <li>Developer-friendly cURL examples</li>
                        <li>Health monitoring endpoint</li>
                    </ul>
                    
                    <h3>🔧 Technical Details</h3>
                    <ul>
                        <li>Built with Go and Gin framework</li>
                        <li>RESTful API design</li>
                        <li>Form-based file uploads</li>
                        <li>JSON responses</li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</div>
{{end}}