{% extends "base.html" %}

{% block title %}Internetstatus{% endblock %}
{% block page_title %}Internetstatus{% endblock %}
{% block main_class %}narrow{% endblock %}

{% block extra_css %}
<style>
    .status-display {
        display: flex; align-items: center; justify-content: center; gap: 14px;
        font-size: 2.2em; font-weight: 800;
        padding: 28px 20px; border-radius: var(--radius-lg); margin-bottom: 20px;
        border: 2px solid;
    }
    .status-dot { width: 22px; height: 22px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px rgba(0,0,0,.06); }
    .online  { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
    .offline { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger); }
    .note-display { font-size: 1.6em; font-weight: 700; text-align: center; margin-bottom: 8px; word-wrap: break-word; line-height: 1.25; }
    .admin-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
</style>
{% endblock %}

{% block content %}
<div class="card">
    {% set status_text = 'Online' if current_status == 1 else 'Offline' %}
    {% set status_class = 'online' if current_status == 1 else 'offline' %}

    <div class="status-display {{ status_class }}">
        <span class="status-dot"></span> Internet: {{ status_text }}
    </div>

    {% if current_note %}
        <div class="note-display">{{ current_note }}</div>
    {% endif %}

    {% if session.get('security_group')|int == 1 %}
    <div class="admin-block">
        <form method="POST" action="{{ url_for('tools.toggle_internet') }}">
            {% if current_status == 1 %}
                <button type="submit" class="btn-block btn-lg btn-danger" name="new_status" value="0">Zet status op OFFLINE</button>
            {% else %}
                <button type="submit" class="btn-block btn-lg btn-success" name="new_status" value="1">Zet status op ONLINE</button>
            {% endif %}
        </form>

        <form method="POST" action="{{ url_for('tools.save_note') }}" style="margin-top: 20px;">
            <div class="field">
                <label for="status_note">Tekst bij de status</label>
                <textarea id="status_note" name="status_note" class="note-textarea" placeholder="Typ hier een korte tekst..." style="min-height: 80px;">{{ current_note }}</textarea>
            </div>
            <button type="submit" class="btn-secondary">💾 Notitie opslaan</button>
        </form>
    </div>
    {% endif %}
</div>
{% endblock %}