snauwcounter/app/templates/index.html

{% extends "base.html" %}

{% block title %}Home - Snauw Counter{% endblock %}

{% block content %}
<div class="card">
    <h2>🔥 Nieuw incident registreren</h2>
    <p>Houd bij wanneer er je partner weer eens tegen je snauwt!.</p>

    <form action="{{ url_for('main.add_incident') }}" method="POST" onsubmit="return validateIncidentForm()">
        <div class="form-group">
            <label for="severity">Snauw-index (1-5 schaal):</label>
            <div class="severity-selector">
                {% set snauw_descriptions = [
                    'Lichte correctie',
                    'Geprikkelde waarschuwing',
                    'Openlijke snauw',
                    'Bijtende aanval',
                    'Explosieve uitval'
                ] %}
                {% for i in range(1, 6) %}
                    <button type="button" class="severity-btn" data-severity="{{ i }}" title="Fase {{ i }}: {{ snauw_descriptions[i-1] }}">
                        {{ i }}
                    </button>
                {% endfor %}
            </div>
            <input type="hidden" id="severity-input" name="severity" required>

            <!-- Snauw-index uitleg -->
            <div class="snauw-index-info" style="margin-top: 1rem; font-size: 0.9rem; color: #6c757d;">
                <details>
                    <summary style="cursor: pointer; font-weight: 500;">📖 Uitleg Snauw-index</summary>
                    <div style="margin-top: 0.5rem; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
                        <div class="snauw-phases">
                            <div><strong>Fase 1 - Lichte correctie:</strong><br>Licht geïrriteerd, kortaf of subtiel sarcastisch. Nog beheerst en goed bij te sturen.</div>
                            <div><strong>Fase 2 - Geprikkelde waarschuwing:</strong><br>Irritatie wordt uitgesproken, toon scherper. Duidelijk signaal dat grenzen naderen.</div>
                            <div><strong>Fase 3 - Openlijke snauw:</strong><br>Emotie overheerst, stem verheft zich. Verwijtend. Gesprek wordt gespannen.</div>
                            <div><strong>Fase 4 - Bijtende aanval:</strong><br>Persoonlijk, cynisch en scherp. Kans op defensief of escalatie.</div>
                            <div><strong>Fase 5 - Explosieve uitval:</strong><br>Volledige ontlading, hard en fel. Communicatie niet meer mogelijk.</div>
                        </div>
                    </div>
                </details>
            </div>
        </div>

        <div class="form-group">
            <label for="incident_time">Tijdstip incident:</label>
            <input type="datetime-local" id="incident_time" name="incident_time">
            <script>((f)=>f())(()=>{const d=new Date(),i=document.getElementById('incident_time');if(i)i.value=`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}T${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`})</script>
            <small style="color: #6c757d;">Automatisch ingevuld, pas aan indien nodig</small>
        </div>

        <div class="form-group">
            <label for="notes">Wat gebeurde er? (optioneel):</label>
            <textarea id="notes" name="notes" placeholder="Beschrijf kort wat er gebeurde..."></textarea>
        </div>

        <button type="submit" class="btn">📝 Incident opslaan</button>
    </form>
</div>

<div class="card">
    <h3>📊 Snelle statistieken</h3>
    {% if current_user.is_authenticated %}
        <p>Bekijk je <a href="{{ url_for('main.statistics') }}">volledige statistieken</a> om trends te zien.</p>
    {% else %}
        <p>Je gegevens worden <strong>alleen lokaal</strong> opgeslagen. <a href="{{ url_for('main.register') }}">Maak een account</a> om je gegevens veilig te bewaren.</p>
    {% endif %}

    <div id="quick-stats">
        <!-- Quick stats will be loaded here via JavaScript -->
    </div>
</div>

{% if not current_user.is_authenticated %}
<div class="card" style="border-left: 4px solid #28a745;">
    <h4>🔒 Privacybescherming</h4>
    <ul style="margin-left: 1rem;">
        <li>✅ Geen persoonlijke gegevens vereist</li>
        <li>✅ Data blijft op jouw apparaat</li>
        <li>✅ Geen tracking of analytics</li>
        <li>✅ Optioneel account voor sync tussen apparaten</li>
    </ul>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
// Load quick stats
document.addEventListener('DOMContentLoaded', function() {
    loadQuickStats();
});

function loadQuickStats() {
    const statsDiv = document.getElementById('quick-stats');

    if ({{ 'true' if current_user.is_authenticated else 'false' }}) {
        // For authenticated users - would make API call
        statsDiv.innerHTML = '<p>📈 Laad volleidig statistieken pagina voor details</p>';
    } else {
        // For anonymous users - use localStorage
        const incidents = JSON.parse(localStorage.getItem('snauw_incidents') || '[]');

        if (incidents.length === 0) {
            statsDiv.innerHTML = '<p style="color: #6c757d;">Nog geen incidenten geregistreerd</p>';
        } else {
            const today = new Date().toDateString();
            const todayIncidents = incidents.filter(inc =>
                new Date(inc.timestamp).toDateString() === today
            );

            const avgSeverity = incidents.reduce((sum, inc) => sum + inc.severity, 0) / incidents.length;

            statsDiv.innerHTML = `
                <div class="stats-grid">
                    <div class="stat-card">
                        <span class="stat-number">${incidents.length}</span>
                        <span class="stat-label">Totaal incidenten</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number">${todayIncidents.length}</span>
                        <span class="stat-label">Vandaag</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number">${avgSeverity.toFixed(1)}</span>
                        <span class="stat-label">Gem. Snauw-index</span>
                    </div>
                </div>
            `;
        }
    }
}

// Mark body as authenticated or not for JavaScript
document.body.dataset.isAuthenticated = {{ 'true' if current_user.is_authenticated else 'false' }};
</script>
{% endblock %}