---
import LoggedIn from '../../layouts/LoggedIn.astro';
import locationManager from '../../lib/classes/managers/LocationManager';
import { Planet } from '../../lib/classes/managers/PlanetManager';
import SystemManager from '../../lib/classes/managers/SystemManager';
import { getMailsByTo } from '../../lib/db/mails';

const { user, token, lang } = Astro.locals;
const active: SystemManager | Planet = Astro.locals.active;

const mails = (await getMailsByTo(user.id)).sort((a, b) => b.date.getTime() - a.date.getTime());
---
<LoggedIn id="mail" title="Mail">
	{mails.map(mail => <div class="mail-card">
        <h1>{!mail.read && "(NEW) "}{mail.subject} | from: {mail.from === null ? "SYSTEM" : locationManager.getUser(mail.from)?.username ?? "Unknown"}</h1>
        <p>{mail.date.toLocaleString()}</p>
        <hr />
        <p style="white-space: pre-line">{mail.body}</p>
    </div>)}
</LoggedIn>
<style>
.mail-card {
    background: #333;
    padding: 1em;
    margin: 1em;
    border-radius: 0.5em;
}

.mail-card h1 {
    color: #fff;
    font-size: 1.5em;
}

.mail-card p {
    color: #fff;
}
</style>