<script>
    let { editable = false, value = $bindable(null) } = $props();
    let editing = $state(false);

    let editValue = value;

    function applyEdit(){
        value = editValue;
        editing=false;
    }

    function resetEdit(){
        editing = false;
        editValue = value;
    }

    function startEdit(){
        editing = editable;
    }

    function typed(ev){
        if (ev.keyCode == 13) applyEdit();
        if (ev.keyCode == 27) resetEdit();
    }
</script>

<style>
    div{
        min-width: 40px;
        min-height: 20px;
    }
    div:hover{
        border: 1px dotted;
    }
</style>

{#if editable && editing}
<input bind:value={editValue} onkeyup={typed} autofocus />
{:else}
<div onclick={startEdit}>{value}</div>
{/if}
