<script lang="ts">
  import type { CronPlan, InspectorItem } from '../types';

  export let plans: CronPlan[];
  export let onInspect: (item: InspectorItem) => void;

  function inspectPlan(plan: CronPlan) {
    onInspect({ title: plan.title, type: 'Cron plan', description: `Scheduled by ${plan.owner}.`, properties: [{ label: 'State', value: plan.enabled ? 'Enabled' : 'Disabled' }, { label: 'Schedule', value: plan.schedule }, { label: 'Next run', value: plan.nextRun }, { label: 'Last result', value: plan.lastResult }] });
  }
</script>

<section class="channel-page cron-channel">
  <header class="channel-header"><p>Scheduled work</p><h1>Cron Plans</h1></header>
  <div class="cron-list">
    {#each plans as plan}
      <article class="cron-row"><div><h2>{plan.title}</h2><p>{plan.schedule} · {plan.nextRun}</p><small>{plan.enabled ? 'Enabled' : 'Disabled'} · {plan.lastResult}</small></div><button aria-label={`Inspect ${plan.title}`} on:click={() => inspectPlan(plan)}>Inspect</button></article>
    {/each}
  </div>
</section>
