{% extends spa_base or "base.html"%}
{% block title %}Editar - {{ item.name }}{% endblock %}
{% block extra_head %}
<style>
    .edit-page {
        max-width: 600px;
    }
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 500;
        margin-bottom: 20px;
    }
    .back-link:hover { color: var(--text-primary); }
    .edit-header h1 {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 24px;
    }
    .edit-form {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 28px;
        border: 1px solid var(--border);
        margin-bottom: 24px;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group:last-child { margin-bottom: 0; }
    .form-group label {
        display: block;
        font-size: 0.8em;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        font-weight: 500;
    }
    .form-group input {
        width: 100%;
        padding: 12px 14px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-size: 0.9em;
        transition: var(--transition);
    }
    .form-group input:focus {
        outline: none;
        border-color: var(--text-secondary);
    }
    .form-group .logo-preview {
        margin-top: 10px;
    }
    .form-group .logo-preview img {
        max-height: 60px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
    }
    .form-actions {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }
    .meta-info {
        padding-top: 20px;
        border-top: 1px solid var(--border);
        margin-top: 24px;
    }
    .meta-info p {
        color: var(--text-muted);
        font-size: 0.85em;
    }
    .delete-btn {
        margin-top: 12px;
    }
    @media (max-width: 768px) {
        .edit-page {
            max-width: 100%;
        }
        .edit-header h1 {
            font-size: 1.3em;
        }
        .edit-form {
            padding: 20px;
        }
        .form-group input {
            padding: 10px 12px;
            font-size: 0.85em;
        }
        .form-actions {
            flex-direction: column;
        }
        .form-actions .btn {
            width: 100%;
            justify-content: center;
        }
    }
    @media (max-width: 480px) {
        .edit-header h1 {
            font-size: 1.1em;
        }
        .edit-form {
            padding: 16px;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="edit-page">
    <a href="{{ url_for('admin_canais', tipo=item.tipo) }}" class="back-link">← Voltar</a>

    <div class="edit-header">
        <h1>Editar Conteúdo</h1>
    </div>

    <form method="POST" class="edit-form">
        <div class="form-group">
            <label>Nome</label>
            <input type="text" name="name" value="{{ item.name }}">
        </div>
        <div class="form-group">
            <label>Logo URL</label>
            <input type="text" name="logo" value="{{ item.logo }}">
            {% if item.logo %}
            <div class="logo-preview">
                <img src="{{ item.logo }}" alt="Logo de {{ item.name|e }}" onerror="this.style.display='none'">
            </div>
            {% endif %}
        </div>
        <div class="form-group">
            <label>Categoria / Grupo</label>
            {% if groups %}
            <select name="group_title" style="width:100%; padding:12px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.9em;">
                {% for g in groups %}
                <option value="{{ g }}" {% if item.group_title == g %}selected{% endif %}>{{ g }}</option>
                {% endfor %}
            </select>
            {% else %}
            <input type="text" name="group_title" value="{{ item.group_title }}">
            {% endif %}
        </div>
        <div class="form-group">
            <label>URL do Stream</label>
            <input type="text" name="stream_url" value="{{ item.stream_url }}">
        </div>
        <div class="form-group">
            <label>TVG ID</label>
            <input type="text" name="tvg_id" value="{{ item.tvg_id or '' }}">
        </div>
        <div class="form-group">
            <label>Descricao</label>
            <textarea name="description" style="width:100%; padding:12px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.9em; min-height:80px; resize:vertical;">{{ item.description or '' }}</textarea>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn">Salvar</button>
            <a href="{{ url_for('toggle_hidden', item_id=item.id) }}" class="btn {% if item.is_hidden %}btn-outline{% endif %}" style="{% if not item.is_hidden %}background:var(--primary);{% endif %}">
                {{ 'Tornar Visivel' if item.is_hidden else 'Ocultar' }}
            </a>
            {% if item.is_hidden %}
            <span class="badge badge-danger">Oculto</span>
            {% else %}
            <span class="badge badge-success">Visivel</span>
            {% endif %}
        </div>
    </form>

    <div class="meta-info">
        <p>Tipo: {{ item.tipo }} | ID: {{ item.id }} | Views: {{ item.view_count or 0 }}</p>
        <a href="{{ url_for('admin_delete_canal', item_id=item.id) }}" class="btn btn-sm delete-btn" style="background:var(--primary);" onclick="return confirm('Excluir {{ item.name }}?')">Excluir</a>
    </div>
</div>
{% endblock %}