<script setup>
import AppIcon from './AppIcon.vue';
import { boot } from '../format';

/**
 * The sheet's header line. The title stands alone here — the period and the
 * duration already have their own pills below, so repeating them in the
 * heading only made the line wrap.
 */
</script>

<template>
    <div class="banner">
        <span class="banner-eyebrow is-mark" aria-hidden="true">
            <AppIcon name="rings" :size="16"/>
        </span>

        <h1 class="banner-title">{{ boot.title }}</h1>

        <div class="banner-meta">
            <span class="banner-pill">
                <AppIcon name="calendar" :size="13"/>
                {{ boot.period.label }}
            </span>
            <span class="banner-pill">
                <AppIcon name="gauge" :size="13"/>
                {{ boot.period.duration }}
            </span>
        </div>
    </div>
</template>
