<script>
    import { onMount } from "svelte";
    import { find_files_f, directory_store } from "../../store";
    
    let directory_name;
    
    onMount(() => {
        directory_name = $directory_store;
    })
    
    function clickHandler() {
        $directory_store = directory_name;
        find_files_f();
    }
</script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="input-group">
    <input class="input text-black" type="text" id="filename" placeholder={$directory_store} bind:value={directory_name} /> 
    <div class="input-group-prepend">
        <button type="button"
            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm  text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            on:click={clickHandler}>
            <i class="material-icons">folder</i>
        </button>
    </div>
</div>


<style>
    #filename {
        margin-left : 0px;
        margin-bottom: 5px;
    }
    button { 
        margin-left: 6px;
    }
</style>