<script>
    import { display }    from '../time.svelte.js';
    import { t }          from '../translations.svelte.js';
    import MarkdownEditor from './MarkdownEditor.svelte';
    import TimeStampInput from './TimeStampInput.svelte';
    import Notes          from '../routes/notes/RelatedNotes.svelte';

    let { record = null, onAbort = () => {}, onDrop = time_id => {}, onSet = time => {} } = $props();

    function cancel(e){
        e.preventDefault();
        onAbort();
    }

    function drop(e){
        e.preventDefault();
        if (confirm(t('confirm_delete',{element:record.subject}))) onDrop(record.id);
    }

    function onsubmit(e){
        e.preventDefault();
        onSet(record);
    }
</script>

{#if record}
<form {onsubmit}>
<fieldset class="time record">
    <legend>{t('edit_object',{object:t('record')})}</legend>
    <label>
        {t('subject')}
        <input type="text" bind:value={record.subject} />
    </label>
    <label>
        {t('start')}
        <TimeStampInput bind:timestamp={record.start_time} />
    </label>
    <label>
        {t('end')}
        <TimeStampInput bind:timestamp={record.end_time} />
    </label>
    <label>
        {t('description')}
        <MarkdownEditor simple={true} bind:value={record.description} />
    </label>
    <button type="submit">{t('save')}</button>
    <button class="cancel" onclick={cancel} >{t('cancel')}</button>
    <button class="delete" onclick={drop} >{t('delete')}</button>
</fieldset>
</form>
<Notes module="time" entity_id={record.id} />
{/if}
