{% load static %}
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}SafePass - Şifre Yöneticisi{% endblock %}</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    {% block extra_css %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
    
    {% block content %}{% endblock %}
    
    <!-- Developer Info Button -->
    <button class="dev-info-btn" id="devInfoBtn" title="Geliştirici Bilgileri">
        ❤️
    </button>
    
    <!-- Developer Info Modal -->
    <div class="dev-modal" id="devModal">
        <div class="dev-modal-content">
            <button class="dev-modal-close" id="closeModal">&times;</button>
            <div class="dev-modal-header">
                <span class="dev-logo">🔐</span>
                <h2>SafePass</h2>
                <p class="dev-tagline">Çevrimdışı Şifre Yönetimi</p>
            </div>
            <div class="dev-modal-body">
                <div class="dev-info-item">
                    <span class="dev-label">Geliştirici</span>
                    <span class="dev-value">Baran Celal Tonyalı</span>
                </div>
                <div class="dev-info-item">
                    <span class="dev-label">Versiyon</span>
                    <span class="dev-value">1.0.4</span>
                </div>
                <div class="dev-info-item">
                    <span class="dev-label">GitHub</span>
                    <a href="https://github.com/Barancll/safepass-cli" target="_blank" class="dev-link">
                        github.com/Barancll/safepass-cli
                    </a>
                </div>
                <div class="dev-info-item">
                    <span class="dev-label">LinkedIn</span>
                    <a href="https://www.linkedin.com/in/baran-celal-tonyali/" target="_blank" class="dev-link">
                        linkedin.com/in/baran-celal-tonyali
                    </a>
                </div>
                <div class="dev-info-item">
                    <span class="dev-label">Website</span>
                    <a href="https://barancelaltonyali.com/" target="_blank" class="dev-link">
                        barancelaltonyali.com
                    </a>
                </div>
            </div>
            <div class="dev-modal-footer">
                Made with <span class="heart-pulse">❤️</span> in Turkey
            </div>
        </div>
    </div>
    
    <!-- Scripts -->
    <script src="{% static 'js/app.js' %}"></script>
    <script>
        // Developer Info Modal - Inline to ensure it works
        document.addEventListener('DOMContentLoaded', function() {
            const devBtn = document.getElementById('devInfoBtn');
            const devModal = document.getElementById('devModal');
            const closeBtn = document.getElementById('closeModal');
            
            if (devBtn && devModal) {
                devBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    devModal.style.display = 'flex';
                    setTimeout(() => devModal.classList.add('show'), 10);
                });
                
                if (closeBtn) {
                    closeBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        devModal.classList.remove('show');
                        setTimeout(() => devModal.style.display = 'none', 300);
                    });
                }
                
                devModal.addEventListener('click', function(e) {
                    if (e.target === devModal) {
                        devModal.classList.remove('show');
                        setTimeout(() => devModal.style.display = 'none', 300);
                    }
                });
            }
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>
