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

{% block title %}Yeni Şifre Ekle - 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>➕ Yeni Şifre Ekle</h1>
            </div>
        </div>
    </div>

    <div class="form-container">
        <form id="addCardForm" class="card-form">
            <!-- Popular Services Quick Select -->
            <div class="form-group">
                <label>Popüler Servisler</label>
                <div class="service-grid">
                    <button type="button" class="service-btn" data-service="Gmail" data-url="https://gmail.com">
                        <img src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png" alt="Gmail" onerror="this.style.display='none'">
                        <span>Gmail</span>
                    </button>
                    <button type="button" class="service-btn" data-service="Twitter" data-url="https://twitter.com">
                        <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#1DA1F2" d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/></svg>
                        <span>Twitter</span>
                    </button>
                    <button type="button" class="service-btn" data-service="Facebook" data-url="https://facebook.com">
                        <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        <span>Facebook</span>
                    </button>
                    <button type="button" class="service-btn" data-service="Instagram" data-url="https://instagram.com">
                        <svg viewBox="0 0 24 24" width="32" height="32"><defs><linearGradient id="ig" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#FD5"/><stop offset="50%" stop-color="#F50"/><stop offset="100%" stop-color="#C02AAA"/></linearGradient></defs><path fill="url(#ig)" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                        <span>Instagram</span>
                    </button>
                    <button type="button" class="service-btn" data-service="Netflix" data-url="https://netflix.com">
                        <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#E50914" d="M5.398 0v.006c3.028 8.556 5.37 15.175 8.348 23.596 2.344.058 4.85.398 4.854.398-2.8-7.924-5.923-16.747-8.487-24zm8.489 0v9.63L18.6 22.951c-.043-7.86-.004-15.913.002-22.95zM5.398 1.05V24c1.873-.225 2.81-.312 4.715-.398v-9.22z"/></svg>
                        <span>Netflix</span>
                    </button>
                    <button type="button" class="service-btn" data-service="GitHub" data-url="https://github.com">
                        <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#fff" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                        <span>GitHub</span>
                    </button>
                    <button type="button" class="service-btn" data-service="LinkedIn" data-url="https://linkedin.com">
                        <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#0A66C2" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        <span>LinkedIn</span>
                    </button>
                    <button type="button" class="service-btn" data-service="Amazon" data-url="https://amazon.com">
                        <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#FF9900" d="M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.12.48-.256.19-.6.41-1.006.654-1.244.743-2.64 1.316-4.185 1.726-1.544.41-3.06.612-4.544.612-3.06 0-5.693-.48-7.9-1.433C1.774 20.905.476 19.867.044 18.783c-.05-.126-.03-.23.047-.36.04-.1.088-.13.14-.13.01 0 .02.01.034.024zM21.48 17.025c-.36-.48-.84-.61-1.44-.39l-3.36 1.32c-.12.05-.19.09-.23.12-.04.05-.06.12-.06.22 0 .1.02.17.06.21.04.03.11.07.23.12l3.36 1.32c.6.22 1.08.09 1.44-.39.36-.48.36-.96 0-1.44zm2.26-5.76c-.87 0-1.63.28-2.27.84-.66.56-1.02 1.26-1.1 2.1 0 .23.02.42.07.57.05.15.12.29.22.42.34.45.78.67 1.32.67.54 0 1-.22 1.37-.67.1-.13.17-.27.22-.42.05-.15.07-.34.07-.57-.07-.84-.44-1.54-1.1-2.1-.64-.56-1.4-.84-2.27-.84z"/></svg>
                        <span>Amazon</span>
                    </button>
                </div>
            </div>

            <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;">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                    </svg>
                    Başlık *
                </label>
                <input type="text" id="title" name="title" class="form-input-modern" required 
                       placeholder="Servis adını girin veya yukarıdan seçin" 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" 
                       placeholder="kullanici@ornek.com" 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 
                           placeholder="En az 8 karakter" minlength="8">
                    <button type="button" class="btn-toggle-password" data-target="password" 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 class="password-strength-indicator">
                    <div class="strength-bar">
                        <div id="passwordStrengthBar" class="strength-fill" style="width: 0%"></div>
                    </div>
                    <span id="passwordStrengthText" class="strength-text">Şifre girin</span>
                </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" 
                       placeholder="https://ornek.com" maxlength="500">
            </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" rows="4" class="form-textarea-modern"
                          placeholder="Ek bilgiler, güvenlik soruları vb..." maxlength="1000"></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-select-modern">
                    <option value="">Genel</option>
                        <option value="social">Sosyal Medya</option>
                        <option value="email">E-posta</option>
                        <option value="banking">Bankacılık</option>
                        <option value="shopping">Alışveriş</option>
                        <option value="work">İş</option>
                        <option value="entertainment">Eğlence</option>
                        <option value="other">Diğer</option>
                    </select>
                </div>
            </div>

            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="window.location.href='/passwords'">
                    İptal
                </button>
                <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>
            </div>
        </form>
    </div>
</div>
{% endblock %}

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