{% extends "base.html" %}
{% load static %}

{% block title %}Yardım - SafePass{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/sidebar.css' %}?v={{ APP_VERSION }}">
<link rel="stylesheet" href="{% static 'css/components/layout.css' %}?v={{ APP_VERSION }}">
<link rel="stylesheet" href="{% static 'css/components/help.css' %}?v={{ APP_VERSION }}">
<link rel="stylesheet" href="{% static 'css/components/buttons.css' %}?v={{ APP_VERSION }}">
{% endblock %}

{% block body_class %}with-sidebar{% endblock %}

{% block content %}
{% include "partials/sidebar.html" %}

<div class="main-content">
    <div class="page-header">
        <h1>❓ Yardım & Sık Sorulan Sorular</h1>
    </div>

    <div class="help-container">
        <div class="help-section">
            <h2>🔐 SafePass Nedir?</h2>
            <p>SafePass, tüm şifrelerinizi güvenli bir şekilde saklamanızı sağlayan, tamamen <strong>offline</strong> çalışan bir şifre yöneticisidir. Verileriniz sadece sizin bilgisayarınızda saklanır, hiçbir sunucuya gönderilmez.</p>
        </div>

        <div class="help-section">
            <h2>🛡️ Güvenlik</h2>
            
            <div class="faq-item">
                <h3>Master Şifre Nedir?</h3>
                <p>Master şifre, tüm diğer şifrelerinizi koruyan ana anahtardır. Bu şifreyi sadece siz bilirsiniz ve hiçbir yerde saklanmaz. Master şifrenizi unutursanız, verilerinize erişemezsiniz!</p>
            </div>

            <div class="faq-item">
                <h3>Şifrelerim Nasıl Korunuyor?</h3>
                <p>Tüm şifreleriniz AES-256-GCM algoritması ile şifrelenir. Bu, bankalar ve askeri kurumlar tarafından kullanılan aynı şifreleme standardıdır. Şifreleme anahtarınız master şifrenizden türetilir ve sadece sizin bilgisayarınızda saklanır.</p>
            </div>

            <div class="faq-item">
                <h3>Offline Çalışma Ne Demek?</h3>
                <p>SafePass internet bağlantısı gerektirmez. Tüm verileriniz yerel olarak bilgisayarınızda saklanır (<code>~/.safepass/</code> klasöründe). Bu, verilerinizin hiçbir sunucuya gönderilmediği ve sadece sizin kontrolünüzde olduğu anlamına gelir.</p>
            </div>
        </div>

        <div class="help-section">
            <h2>📝 Kullanım</h2>
            
            <div class="faq-item">
                <h3>Yeni Kart Nasıl Eklenir?</h3>
                <ol>
                    <li>Sol menüden <strong>"Şifre Ekle"</strong> butonuna tıklayın</li>
                    <li>Başlık, kullanıcı adı ve şifre bilgilerini girin</li>
                    <li>İsterseniz URL ve notlar ekleyin</li>
                    <li><strong>Ana Kategori</strong> ve <strong>Alt Kategori</strong> seçin</li>
                    <li><strong>"Kaydet"</strong> butonuna tıklayın</li>
                </ol>
            </div>

            <div class="faq-item">
                <h3>Kategoriler Nasıl Çalışır?</h3>
                <p>SafePass, şifrelerinizi düzenli tutmak için hiyerarşik bir kategori sistemi sunar:</p>
                <ul>
                    <li><strong>📁 Genel:</strong> E-Posta, Sosyal Medya, Alışveriş, Forumlar & Üyelikler</li>
                    <li><strong>💰 Finans:</strong> Bankacılık, Kredi Kartları, Kripto Paralar, Faturalar</li>
                    <li><strong>💼 İş & Geliştirici:</strong> Şirket Hesapları, Sunucular & SSH, Veritabanları, Git & Repolar, API & Lisanslar</li>
                    <li><strong>🌐 Sistem & Ağ:</strong> Wi-Fi Şifreleri, Cihaz Pinleri, Modem Arayüzleri, Yazılım Lisansları</li>
                    <li><strong>👤 Kişisel:</strong> E-Devlet & Resmi Kurum, Sağlık, Notlar & Güvenli Dosyalar</li>
                </ul>
            </div>

            <div class="faq-item">
                <h3>Güçlü Şifre Nasıl Üretilir?</h3>
                <ol>
                    <li>Sol menüden <strong>"Şifre Üret"</strong> sayfasına gidin</li>
                    <li>Şifre uzunluğunu ve karakter tiplerini seçin</li>
                    <li><strong>"Yeni Şifre Üret"</strong> butonuna tıklayın</li>
                    <li>Beğendiğiniz şifreyi kopyalayın ve kullanın</li>
                </ol>
            </div>

            <div class="faq-item">
                <h3>Şifre Güvenliği Nasıl Hesaplanır?</h3>
                <p>Şifre gücü şu kriterlere göre hesaplanır:</p>
                <ul>
                    <li><strong>Uzunluk:</strong> Daha uzun şifreler daha güçlüdür (min 12 karakter önerilir)</li>
                    <li><strong>Karakter Çeşitliliği:</strong> Büyük harf, küçük harf, sayı ve özel karakter kullanımı</li>
                    <li><strong>Tahmin Edilebilirlik:</strong> Yaygın şifre kalıpları ve sözlük kelimeleri kontrol edilir</li>
                </ul>
            </div>

            <div class="faq-item">
                <h3>Genel Güvenlik Skoru Nasıl Hesaplanır?</h3>
                <p>Dashboard'daki genel güvenlik skoru şifrelerinizin kalitesine göre hesaplanır:</p>
                <ul>
                    <li><strong>Güçlü şifreler:</strong> 100 puan değerinde</li>
                    <li><strong>Orta şifreler:</strong> 60 puan değerinde</li>
                    <li><strong>Zayıf şifreler:</strong> 20 puan değerinde + ekstra -5 puan ceza</li>
                    <li><strong>Tekrar eden şifreler:</strong> Her tekrar için -10 puan</li>
                </ul>
                <p>Örneğin: 3 zayıf şifreniz varsa, skorunuz yaklaşık <strong>5 puan</strong> olacaktır!</p>
            </div>

            <div class="faq-item">
                <h3>Şifre Geçmişi Nedir?</h3>
                <p>SafePass, şifrelerinizi değiştirdiğinizde eski versiyonları otomatik olarak saklar. Her şifre kartındaki <strong>🕒 Geçmiş</strong> butonuna tıklayarak:</p>
                <ul>
                    <li>Önceki şifrelerinizi görebilir</li>
                    <li>Ne zaman değiştirildiğini görebilir</li>
                    <li>Eski bir şifreyi kopyalayabilirsiniz</li>
                </ul>
            </div>
        </div>

        <div class="help-section">
            <h2>⚙️ Ayarlar & Yönetim</h2>
            
            <div class="faq-item">
                <h3>Master Şifremi Değiştirebilir miyim?</h3>
                <p>Evet! Profil sayfasından master şifrenizi değiştirebilirsiniz. Değiştirdiğinizde, tüm şifreleriniz yeni master şifre ile otomatik olarak yeniden şifrelenir.</p>
            </div>

            <div class="faq-item">
                <h3>Verilerimi Yedekleyebilir miyim?</h3>
                <p>Evet! Sol menüdeki <strong>"İçe/Dışa Aktar"</strong> sayfasından verilerinizi yönetebilirsiniz:</p>
                <ul>
                    <li><strong>JSON Dışa Aktar:</strong> Tüm şifrelerinizi JSON formatında indirin</li>
                    <li><strong>JSON İçe Aktar:</strong> Daha önce SafePass'ten aldığınız yedeği geri yükleyin. Mevcut kartlardaki şifre değişiklikleri otomatik güncellenir (eski şifre geçmişe kaydedilir)</li>
                    <li><strong>CSV İçe Aktar:</strong> Diğer şifre yöneticilerinden (KeePass, Bitwarden vb.) şifrelerinizi aktarın. KeePass ve SafePass formatlarını destekler</li>
                </ul>
                <p><strong>💡 Akıllı İçe Aktarma:</strong> Yeni kartlar eklenir, aynı kullanıcı adı/URL'ye sahip kartlarda şifre farklıysa güncellenir.</p>
                <p><strong>⚠️ ÖNEMLİ:</strong> Dışa aktarılan dosya şifrelerinizi düz metin olarak içerir. Güvenli bir yerde saklayın!</p>
            </div>

            <div class="faq-item">
                <h3>Master Şifremi Unutursam Ne Olur?</h3>
                <p><strong>ÖNEMLİ:</strong> Master şifrenizi unutursanız, verilerinize erişmeniz mümkün değildir. Master şifre hiçbir yerde saklanmaz ve geri getirilemez. Bu nedenle:</p>
                <ul>
                    <li>Master şifrenizi güvenli bir yerde saklayın</li>
                    <li>Unutamayacağınız ancak tahmin edilemeyecek bir şifre seçin</li>
                    <li>Düzenli olarak verilerinizi yedekleyin</li>
                </ul>
            </div>
        </div>

        <div class="help-section">
            <h2>🚨 Sorun Giderme</h2>
            
            <div class="faq-item">
                <h3>Giriş Yapamıyorum</h3>
                <ul>
                    <li>Kullanıcı adınızı ve master şifrenizi doğru yazdığınızdan emin olun</li>
                    <li>Caps Lock tuşunun kapalı olduğunu kontrol edin</li>
                    <li>Şifrenizde boşluk karakteri olup olmadığını kontrol edin</li>
                </ul>
            </div>

            <div class="faq-item">
                <h3>Şifrelerimi Göremiyorum</h3>
                <ul>
                    <li>Tarayıcınızı yenileyin (F5 veya Ctrl+F5)</li>
                    <li>Oturumunuzu kapatıp tekrar giriş yapın</li>
                    <li>Tarayıcı konsolunu açıp hata mesajlarını kontrol edin</li>
                </ul>
            </div>

            <div class="faq-item">
                <h3>Program Çalışmıyor</h3>
                <ul>
                    <li>Python 3.10 veya üzeri yüklü olduğundan emin olun</li>
                    <li>Gerekli paketlerin yüklü olduğunu kontrol edin: <code>pip install -r requirements.txt</code></li>
                    <li>Sunucunun çalıştığından emin olun: <code>python -m safepass</code></li>
                </ul>
            </div>
        </div>

        <div class="help-section">
            <h2>💡 İpuçları</h2>
            <div class="tips-grid">
                <div class="tip-card">
                    <span class="tip-icon">🔢</span>
                    <h4>Uzun Şifreler Kullanın</h4>
                    <p>En az 12-16 karakter uzunluğunda şifreler tercih edin</p>
                </div>
                <div class="tip-card">
                    <span class="tip-icon">🎲</span>
                    <h4>Rastgele Şifreler</h4>
                    <p>Şifre üreteci ile rastgele şifreler oluşturun</p>
                </div>
                <div class="tip-card">
                    <span class="tip-icon">🔄</span>
                    <h4>Düzenli Güncelleyin</h4>
                    <p>Önemli hesaplarınızın şifrelerini 3-6 ayda bir değiştirin</p>
                </div>
                <div class="tip-card">
                    <span class="tip-icon">📋</span>
                    <h4>Notlar Ekleyin</h4>
                    <p>Güvenlik soruları ve ek bilgiler için notlar bölümünü kullanın</p>
                </div>
            </div>
        </div>

        <div class="help-section contact-section">
            <h2>📧 İletişim</h2>
            <p class="contact-message">Sorularınız veya geri bildirimleriniz mi var? SafePass açık kaynak bir proje olarak gelişmeye devam ediyor. Benimle iletişime geçmek için sosyal medya hesaplarımı ziyaret edebilirsiniz!</p>
            <div class="social-links">
                <a href="https://www.linkedin.com/in/baran-celal-tonyali/" target="_blank" class="social-icon linkedin" title="LinkedIn">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                    </svg>
                </a>
                <a href="https://github.com/Barancll" target="_blank" class="social-icon github" title="GitHub">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}