{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="title">Internal Mail Panel</div>
    <div class="subtitle">Communicate securely within the SerUP network.</div>

    {% if error %}
    <div class="alert">{{ error }}</div>
    {% endif %}

    <div class="grid">
        <div class="glass-panel" style="grid-column: span 1;">
            <h3 style="margin-top:0; color:var(--primary);">Compose Message</h3>
            <form method="POST" action="{{ url_for('mail_send') }}">
                <div class="form-group">
                    <label>To (Email Address)</label>
                    <input type="text" name="to" class="form-input" required placeholder="User internal email">
                </div>
                <div class="form-group">
                    <label>Subject</label>
                    <input type="text" name="subject" class="form-input" required>
                </div>
                <div class="form-group">
                    <label>Body</label>
                    <textarea name="body" class="form-input" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn">Send Secure Message</button>
            </form>
        </div>

        <div class="glass-panel" style="grid-column: span 2;">
            <h3 style="margin-top:0; color:var(--primary);">Inbox</h3>
            {% if inbox %}
            <table>
                <thead>
                    <tr>
                        <th>Status</th>
                        <th>From</th>
                        <th>Subject</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for msg in inbox %}
                    <tr style="{{ 'font-weight:700; color:#fff;' if not msg.read else 'color:var(--text-muted);' }}">
                        <td>
                            {% if not msg.read %}
                            <span style="color:var(--primary);">● Unread</span>
                            {% else %}
                            Read
                            {% endif %}
                        </td>
                        <td>{{ msg.from }}</td>
                        <td>{{ msg.subject }}</td>
                        <td>{{ msg.timestamp.split('T')[0] }}</td>
                        <td>
                            <div style="display:flex; gap:0.5rem;">
                                <a href="{{ url_for('mail_read', msg_id=msg.id) }}" class="btn" style="padding:0.4rem 0.8rem; font-size:0.75rem;">Read</a>
                                <form method="POST" action="{{ url_for('mail_delete', msg_id=msg.id) }}" style="display:inline;">
                                    <button class="btn danger" style="padding:0.4rem 0.8rem; font-size:0.75rem;">Del</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color:var(--text-muted);">Inbox is empty.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}