nordabiz/templates/settings/privacy.html

{% extends "base.html" %}

{% block title %}Ustawienia prywatności - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .settings-header {
        margin-bottom: var(--spacing-xl);
    }

    .settings-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .settings-header p {
        color: var(--text-secondary);
        font-size: var(--font-size-lg);
    }

    .settings-card {
        background: white;
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-lg);
    }

    .settings-card h2 {
        font-size: var(--font-size-xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
    }

    .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--border-light);
    }

    .setting-item:last-child {
        border-bottom: none;
    }

    .setting-info {
        flex: 1;
    }

    .setting-label {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .setting-description {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .toggle-switch {
        position: relative;
        width: 50px;
        height: 26px;
        flex-shrink: 0;
        margin-left: var(--spacing-md);
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.3s;
        border-radius: 26px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

    input:checked + .toggle-slider {
        background-color: var(--success);
    }

    input:checked + .toggle-slider:before {
        transform: translateX(24px);
    }

    .info-banner {
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        border: 1px solid #7dd3fc;
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .info-banner svg {
        width: 24px;
        height: 24px;
        color: #0284c7;
        flex-shrink: 0;
    }

    .info-banner .info-text {
        color: #0369a1;
        font-size: var(--font-size-sm);
    }

    .btn-save {
        margin-top: var(--spacing-lg);
    }

    .settings-nav {
        display: flex;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
        flex-wrap: wrap;
    }

    .settings-nav a {
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-secondary);
        background: var(--bg-secondary);
        transition: all 0.2s;
    }

    .settings-nav a:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .settings-nav a.active {
        background: var(--primary);
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="settings-header">
    <h1>
        <svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color: var(--primary);">
            <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
        </svg>
        Ustawienia prywatności
    </h1>
    <p>Kontroluj, które Twoje dane kontaktowe są widoczne dla innych użytkowników</p>
</div>

<div class="settings-nav">
    <a href="{{ url_for('settings_privacy') }}" class="active">Prywatność</a>
    <a href="{{ url_for('settings_2fa') }}">Uwierzytelnianie 2FA</a>
</div>

<div class="info-banner">
    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <div class="info-text">
        Poniższe ustawienia kontrolują widoczność Twoich danych osobowych w portalu.
        Dane Twojej firmy są zarządzane osobno w profilu firmy.
    </div>
</div>

<form method="POST" action="{{ url_for('settings_privacy') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="settings-card">
        <h2>Widoczność danych kontaktowych</h2>

        <div class="setting-item">
            <div class="setting-info">
                <div class="setting-label">Pokaż numer telefonu</div>
                <div class="setting-description">
                    Twój numer telefonu ({{ user.phone or 'nie podano' }}) będzie widoczny dla innych członków
                </div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" name="show_phone" {% if show_phone %}checked{% endif %}>
                <span class="toggle-slider"></span>
            </label>
        </div>

        <div class="setting-item">
            <div class="setting-info">
                <div class="setting-label">Pokaż adres email</div>
                <div class="setting-description">
                    Twój adres email ({{ user.email }}) będzie widoczny dla innych członków
                </div>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" name="show_email" {% if show_email %}checked{% endif %}>
                <span class="toggle-slider"></span>
            </label>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-save">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="margin-right: 6px;">
            <path d="M5 13l4 4L19 7"/>
        </svg>
        Zapisz ustawienia
    </button>
</form>
{% endblock %}