{{define "content"}}
<div class="three-column-layout">
    <!-- Main content -->
    <div class="content-container">
        {{template "header" .}}
        {{template "storage-info" .}}
        {{template "api-endpoints" .}}
        {{template "usage-examples" .}}
    </div>
    
    <!-- Changelog column -->
    <div class="content-container">
        {{template "changelog" .}}
    </div>
    
    <!-- About column -->
    <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">
                <p>
                    <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>
                </p>
                <p>
                    <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>
                </p>
                <p>
                    <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>
                </p>
            </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>
</div>
{{end}}