<script lang="ts">
  // The terminal blocked screen. While app.blocked is set, App.svelte renders only this and all
  // push/poll is stopped; the screen itself makes no network calls. The message is permanent or
  // dated (the expiry rendered in the user's locale + timezone), with the optional operator reason.
  import { app } from '../lib/app.svelte';
  import { t } from '../lib/i18n/index.svelte';
  import { formatBlockUntil } from '../lib/blocked';

  const until = $derived(
    app.blocked?.until ? formatBlockUntil(app.blocked.until, app.locale, app.profile?.timeZone ?? '') : '',
  );
  const message = $derived(until ? t('blocked.temporary', { until }) : t('blocked.permanent'));
</script>

<div class="blocked">
  <div class="card">
    <h1>{t('blocked.title')}</h1>
    <p class="msg">{message}</p>
    {#if app.blocked?.reason}
      <p class="reason"><span class="label">{t('blocked.reason')}</span> {app.blocked.reason}</p>
    {/if}
  </div>
</div>

<style>
  .blocked {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg);
  }
  .card {
    max-width: 28rem;
    text-align: center;
    color: var(--text);
  }
  h1 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
  }
  .msg {
    margin: 0;
    color: var(--text);
  }
  .reason {
    margin: 1rem 0 0;
    color: var(--text-muted);
  }
  .label {
    font-weight: 600;
  }
</style>
