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

{% block title %}Şifre Düzenle - SafePass{% endblock %}

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

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

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

<div class="main-content">
    <div class="page-header">
        <div class="header-with-back">
            <a href="/passwords" class="btn-back">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                </svg>
                Geri
            </a>
            <div>
                <h1>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                        <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>
                    Şifre Düzenle
                </h1>
            </div>
        </div>
    </div>

    <div class="form-container">
        <form id="editCardForm" class="card-form">
            <input type="hidden" id="cardId" value="{{ card.id }}">
            
            <div class="form-group">
                <label for="title">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="9" y1="9" x2="15" y2="9"></line>
                        <line x1="9" y1="15" x2="15" y2="15"></line>
                    </svg>
                    Başlık
                </label>
                <input type="text" id="title" name="title" class="form-input-modern" required 
                       value="{{ card.app_name }}" maxlength="100">
            </div>

            <div class="form-group">
                <label for="username">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    Kullanıcı Adı / E-posta
                </label>
                <input type="text" id="username" name="username" class="form-input-modern" 
                       value="{{ card.username }}" maxlength="255">
            </div>

            <div class="form-group">
                <label for="password">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    Şifre
                </label>
                <div class="password-input-wrapper">
                    <input type="password" id="password" name="password" class="form-input-modern password-field" required 
                           value="{{ decrypted_password }}" minlength="8">
                    <button type="button" class="btn-toggle-password" onclick="togglePasswordVisibility()" title="Göster/Gizle">
                        <svg class="icon-eye-open" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <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>
                        <svg class="icon-eye-closed" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                            <line x1="1" y1="1" x2="23" y2="23"></line>
                        </svg>
                    </button>
                </div>
                <div id="passwordStrength" class="password-strength">
                    <div class="strength-bar">
                        <div id="passwordStrengthBar" class="strength-fill"></div>
                    </div>
                    <div id="passwordStrengthText" class="strength-text">Şifre girin</div>
                </div>
            </div>

            <div class="form-group">
                <label for="url">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="2" y1="12" x2="22" y2="12"></line>
                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                    </svg>
                    Website URL
                </label>
                <input type="url" id="url" name="url" class="form-input-modern" 
                       value="{{ card.url|default:'' }}" placeholder="https://ornek.com">
            </div>

            <div class="form-group">
                <label for="notes">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                        <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>
                    Notlar
                </label>
                <textarea id="notes" name="notes" class="form-input-modern" rows="4" 
                          placeholder="Ek bilgiler, güvenlik soruları vb.">{{ card.notes|default:'' }}</textarea>
            </div>

            <div class="form-group">
                <label for="category">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 8px;">
                        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                        <line x1="7" y1="7" x2="7.01" y2="7"></line>
                    </svg>
                    Kategori
                </label>
                <select id="category" name="category" class="form-input-modern">
                        <option value="">Genel</option>
                        <option value="social" {% if card.category == "social" %}selected{% endif %}>Sosyal Medya</option>
                        <option value="work" {% if card.category == "work" %}selected{% endif %}>İş</option>
                        <option value="finance" {% if card.category == "finance" %}selected{% endif %}>Finans</option>
                        <option value="email" {% if card.category == "email" %}selected{% endif %}>E-posta</option>
                        <option value="entertainment" {% if card.category == "entertainment" %}selected{% endif %}>Eğlence</option>
                        <option value="shopping" {% if card.category == "shopping" %}selected{% endif %}>Alışveriş</option>
                    </select>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 6px;">
                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                        <polyline points="17 21 17 13 7 13 7 21"></polyline>
                        <polyline points="7 3 7 8 15 8"></polyline>
                    </svg>
                    Kaydet
                </button>
                <button type="button" class="btn btn-secondary" onclick="window.location.href='/passwords'">
                    İptal
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Global toggle function
function togglePasswordVisibility() {
    const input = document.getElementById('password');
    const btn = document.querySelector('.btn-toggle-password');
    const eyeOpen = btn.querySelector('.icon-eye-open');
    const eyeClosed = btn.querySelector('.icon-eye-closed');
    
    if (input.type === 'password') {
        input.type = 'text';
        eyeOpen.style.display = 'none';
        eyeClosed.style.display = 'block';
    } else {
        input.type = 'password';
        eyeOpen.style.display = 'block';
        eyeClosed.style.display = 'none';
    }
}
</script>
<script src="{% static 'js/modules/password_edit.js' %}"></script>
{% endblock %}