nordabiz/templates/admin/social_publisher_settings.html

{% extends "base.html" %}

{% block title %}Ustawienia Social Media - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .admin-header {
        margin-bottom: var(--spacing-xl);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .admin-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
    }

    .companies-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: var(--spacing-lg);
    }

    .company-card {
        background: var(--surface);
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        border-left: 4px solid var(--border);
        transition: border-color 0.2s;
    }

    .company-card.connected {
        border-left-color: var(--success);
    }

    .company-card.disconnected {
        border-left-color: var(--text-secondary);
    }

    .company-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-md);
    }

    .company-card-header h3 {
        font-size: var(--font-size-lg);
        color: var(--text-primary);
        margin: 0;
    }

    .connection-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: 600;
    }

    .connection-badge.connected {
        background: var(--success-bg);
        color: var(--success);
    }

    .connection-badge.disconnected {
        background: var(--background);
        color: var(--text-secondary);
    }

    .company-card-details {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-md);
    }

    .company-card-details p {
        margin: var(--spacing-xs) 0;
    }

    .company-card-actions {
        display: flex;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }

    .empty-state {
        text-align: center;
        padding: var(--spacing-2xl);
        color: var(--text-secondary);
        background: var(--surface);
        border-radius: var(--radius-lg);
    }

    .info-banner {
        background: var(--primary-bg);
        border: 1px solid var(--primary);
        border-radius: var(--radius);
        padding: var(--spacing-md) var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
        font-size: var(--font-size-sm);
        color: var(--text-primary);
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="admin-header">
        <h1>Ustawienia Social Media</h1>
        <a href="{{ url_for('admin.social_publisher_list') }}" class="btn btn-secondary">Powrot do listy</a>
    </div>

    <div class="info-banner">
        Skonfiguruj Facebook dla firm, na ktorych stronach chcesz publikowac posty.
        Polacz konto przez OAuth lub wprowadz dane recznie.
    </div>

    {% if company_configs %}
    <div class="companies-grid">
        {% for item in company_configs %}
        <div class="company-card {{ 'connected' if item.config and item.config.is_active and item.config.page_id else 'disconnected' }}">
            <div class="company-card-header">
                <h3>{{ item.company.name }}</h3>
                {% if item.config and item.config.is_active and item.config.page_id %}
                <span class="connection-badge connected">Polaczono</span>
                {% else %}
                <span class="connection-badge disconnected">Brak</span>
                {% endif %}
            </div>

            <div class="company-card-details">
                {% if item.config and item.config.page_name %}
                <p>Strona FB: <strong>{{ item.config.page_name }}</strong></p>
                {% endif %}
                {% if item.oauth_connected %}
                <p>OAuth: <strong style="color: var(--success);">Aktywny</strong>
                    {% if item.oauth_page_name %} ({{ item.oauth_page_name }}){% endif %}
                </p>
                {% endif %}
                {% if item.config %}
                <p>Debug: {% if item.config.debug_mode %}<span style="color: var(--warning);">Wlaczony</span>{% else %}Wylaczony{% endif %}</p>
                {% endif %}
            </div>

            <div class="company-card-actions">
                <a href="{{ url_for('admin.social_publisher_company_settings', company_id=item.company.id) }}"
                   class="btn btn-primary btn-small">Konfiguruj</a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>Brak firm do konfiguracji. Dodaj firmy do portalu, aby skonfigurowac Social Media.</p>
    </div>
    {% endif %}
</div>
{% endblock %}