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

{% block title %}Şifrelerim - 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/cards.css' %}?v={{ APP_VERSION }}">
<link rel="stylesheet" href="{% static 'css/components/buttons.css' %}?v={{ APP_VERSION }}">
<link rel="stylesheet" href="{% static 'css/components/forms.css' %}?v={{ APP_VERSION }}">
{% endblock %}

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

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

<!-- Main Content -->
<main class="main-content">
    <div class="page-header">
        <h1>🔐 Şifrelerim</h1>
        <div class="header-actions">
            <div class="custom-select-wrapper">
                <div class="custom-select" id="custom-category-select">
                    <div class="custom-select-trigger">
                        <span id="selected-category">Tüm Kategoriler</span>
                        <svg width="12" height="12" viewBox="0 0 12 12">
                            <path fill="currentColor" d="M6 9L1 4h10z"/>
                        </svg>
                    </div>
                    <div class="custom-options">
                        <div class="custom-option" data-value="">Tüm Kategoriler</div>
                        <div class="custom-option-group">📁 Genel</div>
                        <div class="custom-option" data-value="genel">Tümü</div>
                        <div class="custom-option" data-value="e-posta">E-Posta</div>
                        <div class="custom-option" data-value="sosyal-medya">Sosyal Medya</div>
                        <div class="custom-option" data-value="alisveris">Alışveriş</div>
                        <div class="custom-option" data-value="forumlar-uyelikler">Forumlar & Üyelikler</div>
                        <div class="custom-option-group">💰 Finans</div>
                        <div class="custom-option" data-value="finans">Tümü</div>
                        <div class="custom-option" data-value="bankacilik">Bankacılık</div>
                        <div class="custom-option" data-value="kredi-kartlari">Kredi Kartları</div>
                        <div class="custom-option" data-value="kripto-paralar">Kripto Paralar</div>
                        <div class="custom-option" data-value="faturalar">Faturalar</div>
                        <div class="custom-option-group">💼 İş & Geliştirici</div>
                        <div class="custom-option" data-value="is-gelistirici">Tümü</div>
                        <div class="custom-option" data-value="sirket-hesaplari">Şirket Hesapları</div>
                        <div class="custom-option" data-value="sunucular-ssh">Sunucular & SSH</div>
                        <div class="custom-option" data-value="veritabanlari">Veritabanları</div>
                        <div class="custom-option" data-value="git-repolar">Git & Repolar</div>
                        <div class="custom-option" data-value="api-lisanslar">API & Lisanslar</div>
                        <div class="custom-option-group">🌐 Sistem & Ağ</div>
                        <div class="custom-option" data-value="sistem-ag">Tümü</div>
                        <div class="custom-option" data-value="wifi-sifreleri">Wi-Fi Şifreleri</div>
                        <div class="custom-option" data-value="cihaz-pinleri">Cihaz Pinleri</div>
                        <div class="custom-option" data-value="modem-arayuzleri">Modem Arayüzleri</div>
                        <div class="custom-option" data-value="yazilim-lisanslari">Yazılım Lisansları</div>
                        <div class="custom-option-group">👤 Kişisel</div>
                        <div class="custom-option" data-value="kisisel">Tümü</div>
                        <div class="custom-option" data-value="e-devlet-resmi-kurum">E-Devlet & Resmi Kurum</div>
                        <div class="custom-option" data-value="saglik">Sağlık</div>
                        <div class="custom-option" data-value="notlar-guvenli-dosyalar">Notlar & Güvenli Dosyalar</div>
                    </div>
                </div>
            </div>
            <input type="text" id="search-input" class="search-input" placeholder="Ara...">
            <a href="/passwords/add" class="btn btn-primary"><span class="btn-icon-plus">+</span> Yeni Şifre</a>
        </div>
    </div>
    
    <div class="cards-grid" id="cards-container">
        {% for card in cards %}
        <div class="password-card" data-id="{{ card.id }}" data-category="{% if card.category %}{{ card.category|lower }}{% else %}genel{% endif %}" data-subcategory="{% if card.subcategory %}{{ card.subcategory|lower }}{% endif %}">
            <div class="card-header">
                <div class="card-title">{{ card.app_name }}</div>
                <div class="card-actions">
                    <button class="btn-icon btn-history" data-card-id="{{ card.id }}" data-tooltip="Geçmiş">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                    </button>
                    <button class="btn-icon btn-edit" data-card-id="{{ card.id }}" data-tooltip="Düzenle">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                    </button>
                    <button class="btn-icon btn-delete" data-card-id="{{ card.id }}" data-tooltip="Sil">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="card-field">
                    <label>Kullanıcı Adı</label>
                    <div class="field-value">{{ card.username }}</div>
                </div>
                <div class="card-field">
                    <label>Şifre</label>
                    <div class="field-value password-field">
                        <div class="password-text">
                            <span class="password-hidden">••••••••</span>
                            <span class="password-visible" style="display:none;">{{ card.password }}</span>
                        </div>
                        <div class="password-actions">
                            <button class="password-btn btn-toggle-password">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                            </button>
                            <button class="password-btn btn-copy-password" data-password="{{ card.password }}">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                {% if card.url and card.url != "" %}
                <div class="card-field">
                    <label>URL</label>
                    <div class="field-value">
                        <a href="{{ card.url }}" target="_blank" rel="noopener noreferrer" style="color: #60a5fa; text-decoration: none;">
                            {{ card.url }}
                        </a>
                    </div>
                </div>
                {% endif %}
                {% if card.notes %}
                <div class="card-field">
                    <label>Notlar</label>
                    <div class="field-value">{{ card.notes }}</div>
                </div>
                {% endif %}
            </div>
            <div class="card-footer">
                <span class="card-category">
                    {% if card.category == "genel" %}📁 Genel
                    {% elif card.category == "finans" %}💰 Finans
                    {% elif card.category == "is-gelistirici" %}💼 İş & Geliştirici
                    {% elif card.category == "sistem-ag" %}🌐 Sistem & Ağ
                    {% elif card.category == "kisisel" %}👤 Kişisel
                    {% else %}📁 Genel
                    {% endif %}
                    {% if card.subcategory %}
                    <span class="subcategory-tag">/ 
                        {% if card.subcategory == "e-posta" %}E-Posta
                        {% elif card.subcategory == "sosyal-medya" %}Sosyal Medya
                        {% elif card.subcategory == "alisveris" %}Alışveriş
                        {% elif card.subcategory == "forumlar-uyelikler" %}Forumlar & Üyelikler
                        {% elif card.subcategory == "bankacilik" %}Bankacılık
                        {% elif card.subcategory == "kredi-kartlari" %}Kredi Kartları
                        {% elif card.subcategory == "kripto-paralar" %}Kripto Paralar
                        {% elif card.subcategory == "faturalar" %}Faturalar
                        {% elif card.subcategory == "sirket-hesaplari" %}Şirket Hesapları
                        {% elif card.subcategory == "sunucular-ssh" %}Sunucular & SSH
                        {% elif card.subcategory == "veritabanlari" %}Veritabanları
                        {% elif card.subcategory == "git-repolar" %}Git & Repolar
                        {% elif card.subcategory == "api-lisanslar" %}API & Lisanslar
                        {% elif card.subcategory == "wifi-sifreleri" %}Wi-Fi Şifreleri
                        {% elif card.subcategory == "cihaz-pinleri" %}Cihaz Pinleri
                        {% elif card.subcategory == "modem-arayuzleri" %}Modem Arayüzleri
                        {% elif card.subcategory == "yazilim-lisanslari" %}Yazılım Lisansları
                        {% elif card.subcategory == "e-devlet-resmi-kurum" %}E-Devlet & Resmi Kurum
                        {% elif card.subcategory == "saglik" %}Sağlık
                        {% elif card.subcategory == "notlar-guvenli-dosyalar" %}Notlar & Güvenli Dosyalar
                        {% else %}{{ card.subcategory }}
                        {% endif %}
                    </span>
                    {% endif %}
                </span>
                <span class="card-date">{{ card.updated_at|date:"d.m.Y" }}</span>
            </div>
        </div>
        {% empty %}
        <div class="empty-state">
            <p>Henüz şifre eklenmemiş</p>
            <a href="/passwords/add" class="btn btn-primary">Şifre Ekle</a>
        </div>
        {% endfor %}
    </div>
    
    <!-- Password History Modal -->
    <div id="history-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>🕒 Şifre Geçmişi</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="history-list" class="history-list">
                    <!-- History items will be loaded here -->
                </div>
                <div id="history-empty" class="history-empty" style="display:none;">
                    <p>Henüz şifre geçmişi yok</p>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block extra_js %}
<script src="/static/js/modules/cards.js"></script>
{% endblock %}