{% extends "base.html" %}
{% block title %}Emails Outlook{% endblock %}
{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">Emails de {{ account.email }}</h1>
        <div>
            <button id="sync-btn" class="btn btn-primary" onclick="syncMails()">
                <i class="bi bi-arrow-clockwise"></i> Synchroniser
            </button>
            <a href="{{ url_for('outlook_pages.index') }}" class="btn btn-secondary">Retour</a>
        </div>
    </div>
    
    <div id="sync-status" class="mb-3" style="display:none;"></div>
    
    {% if mails %}
    <div class="list-group">
        {% for mail in mails %}
        <div class="list-group-item {% if not mail.is_read %}list-group-item-info{% endif %}">
            <div class="d-flex justify-content-between">
                <div>
                    <h5 class="mb-1">{{ mail.subject or '(sans sujet)' }}</h5>
                    <p class="mb-1 text-muted">
                        <strong>De:</strong> {{ mail.from_name or mail.sender_email or 'Inconnu' }}
                        {% if mail.from_email %}&lt;{{ mail.from_email }}&gt;{% endif %}
                    </p>
                    <small class="text-muted">{{ mail.received_at.strftime('%d/%m/%Y %H:%M') if mail.received_at else '-' }}</small>
                </div>
                {% if mail.has_attachments %}
                <span class="badge bg-secondary"><i class="bi bi-paperclip"></i></span>
                {% endif %}
            </div>
            <p class="mt-2 mb-0">{{ mail.body_preview[:200] }}{% if mail.body_preview|length > 200 %}...{% endif %}</p>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="alert alert-info">
        <i class="bi bi-info-circle"></i> Aucun email synchronisé. Cliquez sur "Synchroniser" pour récupérer vos emails.
    </div>
    {% endif %}
</div>

<script>
function syncMails() {
    const btn = document.getElementById('sync-btn');
    const status = document.getElementById('sync-status');
    
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Synchronisation...';
    
    status.className = 'alert alert-info mb-3';
    status.style.display = 'block';
    status.innerHTML = 'Synchronisation en cours...';
    
    fetch('/outlook/api/sync-mails/{{ account.id }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                status.className = 'alert alert-success mb-3';
                status.innerHTML = data.message || 'Synchronisation réussie';
                setTimeout(() => window.location.reload(), 1500);
            } else {
                status.className = 'alert alert-danger mb-3';
                status.innerHTML = data.error || 'Erreur de synchronisation';
            }
        })
        .catch(error => {
            status.className = 'alert alert-danger mb-3';
            status.innerHTML = 'Erreur: ' + error.message;
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Synchroniser';
        });
}
</script>
{% endblock %}