<script>
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import QlSet from "$lib/islands/quick-link-set-island.svelte";
    import Island from "$lib/islands/island.svelte";
    import { location } from "$lib/stores/location";
    import { getCurrentLocation } from "$lib/scripts/getLocation";
    const title = "Settings";

    $: if ($location) {
        getCurrentLocation()
    }
</script>

<Header {title} />

<QlSet />

<Island variables={{title: "Location"}}>
    <p>Use your location to quickly check departure boards near you</p>
    <div class="checkbox-container">
        <label for="location_enable">Enabled</label>
        <input id="location_enable" type="checkbox" bind:checked={$location}>
    </div>
</Island>

<Nav />

<style>
    .checkbox-container {
        display: inline-flex;
        align-items: center;
        margin: auto;
    }
    .checkbox-container input[type="checkbox"] {
        margin: 0;
        height: 25px;
        width: 25px;
    }
    .checkbox-container label {
        margin-left: 0;
        margin-right: 25px;
        font-weight: 800;
    }
</style>
