<script lang="ts">
import { onMount } from 'svelte';
// import type { Writable } from 'svelte/store';
// import { localStorageStore } from '@skeletonlabs/skeleton';

import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import type { key_val } from '$lib/ae_stores';

export let expire_minutes: number = 10;
export let mount_reload_sec: number = 0;

export let ds_code: string;
export let ds_name: null|string = null;
export let ds_type: string = 'text';
export let for_type: null|string = null;
export let for_id: null|string = null;
console.log(`ae_e_data_store ${ds_code} for_type=${for_type} for_id=${for_id} account_id=${$ae_loc.account_id}`);

// export let store: string = 'local';
export let display: string = 'block'; // Avoid; Use class list instead
export let class_li: string = ''; // : string[] = [];
export let try_cache: boolean = true;

export let hide: boolean = false; // Hide the entire element
export let show_edit: boolean = false;
export let show_edit_btn: boolean = true;
export let show_view: boolean = true;
// export let show_delete_btn: boolean = false;

export let ds_loaded: boolean = false;

export let debug: boolean = false;

let ae_promises: key_val = {}; // Promise<any>;
let ds_get_results: Promise<any>|key_val;
let ds_loading_status: string = 'starting...';
let ds_submit_results: Promise<any>|key_val;

let val_json: key_val;
let val_html: key_val;
let val_md: key_val;
export let val_sql: null|key_val = null;
let val_text: string;


let ds_code_obj =
    {
        id: null,
        account_id: null,
        code: ds_code,
        name: ds_name,
        type: ds_type,
        for_type: null, // for_type
        for_id: null, // for_id
        access_read: null, // 'super', 'manager', 'administrator', 'trusted', 'authenticated', 'anonymous'
        access_write: null, // 'super', 'manager', 'administrator', 'trusted', 'authenticated', 'anonymous'
        access_delete: null, // 'super', 'manager', 'administrator', 'trusted', 'authenticated', 'anonymous'
        html: null,
        json: null,
        md: null,
        text: null,
        updated_on: null,
        chk_account_id: null,
    };

let ae_ds_tmp: key_val;
if (browser && localStorage.getItem(`ae_ds__${ds_code}`)) {
    ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
} else {
    ae_ds_tmp = ds_code_obj;
}

//  Writable<key_val> = localStorageStore(`ae_ds__${ds_code}`, ds_code_obj);
// console.log(`ae_e_data_store cached: ${ds_code} = `, ae_ds_tmp);
console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`);

if (!ae_ds_tmp || !ae_ds_tmp.id) {
    ds_loading_status = '-- loading --';
} else {
    // ae_ds_loc.set(ae_ds_tmp);
}

$ae_sess.ds.submit_status = null;
$ae_sess.ds.create_status = null;
$ae_sess.ds.update_status = null;

let trigger: null|string = null;

// $: if (ae_ds_tmp) {
//     console.log(`ae_e_data_store ae_ds_loc = `, ae_ds_tmp);
// }

import { browser } from '$app/environment';

let ae_ds_loc_test: any;
if (browser) {
    console.log('ae_e_data_store Browser detected.');
    ae_ds_loc_test = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
    console.log(`ae_e_data_store ae_ds_loc_test = `, ae_ds_loc_test);
    // ae_ds_tmp = {id: null};
    // ae_ds_tmp = ae_ds_loc_test;
} else {
    console.log('ae_e_data_store Browser not detected.');
}

// This is a quick check to make sure the data store is not stale. If it is, then we need to trigger a reload.
if (browser && ae_ds_tmp && ae_ds_tmp.loaded_on && ae_ds_tmp.chk_account_id == $ae_loc.account_id) {
    console.log(`ae_e_data_store ${ds_code} loaded_on: ${ae_ds_tmp.loaded_on}`);
    let loaded_on = new Date(ae_ds_tmp.loaded_on);
    let now = new Date();
    let diff = now.getTime() - loaded_on.getTime();
    let diff_minutes = diff / (1000 * 60);
    if (diff_minutes > expire_minutes) {
        console.log(`ae_e_data_store: Data Store ${ds_code} stale. Last loaded on: ${loaded_on.toISOString()}`);
        // Wait for random number of milliseconds to avoid all data stores being reloaded at the same time.
        let random_ms = Math.floor(Math.random() * 500);
        console.log(`ae_e_data_store: Random number of milliseconds: ${random_ms}`);
        setTimeout(() => {
            trigger = 'load__ds__code';
        }, random_ms);
    }
} else if (browser) {
    console.log('ae_e_data_store: No loaded_on date found and or the account_id check failed. Need to trigger reload.');
    trigger = 'load__ds__code';
}

// This is a secondary check... The account_id should either be null or match the current account_id.
if (!ae_ds_tmp || !ae_ds_tmp.account_id === null || $ae_loc.account_id == $ae_loc.account_id) {
    trigger = 'load__ds__code';
}

onMount(() => {
    console.log('Element: Data Store element_data_store.svelte');
    // console.log('ae_ MOUNTED Browser detected.');

    if (mount_reload_sec) {
        // Wait for random number of milliseconds to avoid all data stores being reloaded at the same time.
        let random_ms = Math.floor(Math.random() * mount_reload_sec * 1000);
        console.log(`ae_e_data_store: Random number of milliseconds: ${random_ms}`);
        setTimeout(() => {
            trigger = 'load__ds__code';
        }, random_ms);
    }
});

// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
// console.log(`ae_ ds_code_li = `, ds_code_li);

$: if (trigger == 'load__ds__code' && ds_code && ds_type) {
    console.log(`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`);

    trigger = null;

    load_data_store({
        code: ds_code,
        type: ds_type,
        for_type: for_type,
        for_id: for_id,
        try_cache: try_cache
    });
}

async function load_data_store(
        {
        code,
        type='text',
        for_type=null,
        for_id=null,
        try_cache=true
        }: {
        code: string,
        type: string,
        for_type: string|null,
        for_id: string|null,
        try_cache: boolean
        }
    ) {

    // let ds_code_val = await api.get_data_store_obj_w_code({
    ds_get_results = api.get_data_store_obj_w_code({
        api_cfg: $ae_api,
        data_store_code: code,
        data_type: type,
        log_lvl: 0

        })
    .then( function (ds_results) {
        // console.log(`ae_ Data Store ${code} = `, ds_results);
        if (ds_results) {
            console.log(`ae_e_data_store: Got a result for code ${code}`);
            if (!ds_results.data_store_id_random) {
                console.log('Something went wrong? No data store ID found.');
                return false;
            }

            ds_loaded = true;

            // Set the loaded_on datetime to the current time for reference later. This will be used to determine if the data store is stale.
            ae_ds_tmp.loaded_on = new Date().toISOString();
            // Set the chk_account_id as a backup check to make sure the data store belongs to the account for the current site. This should not be needed, but here we are...
            ae_ds_tmp.chk_account_id = $ae_loc.account_id;

            ae_ds_tmp.id = ds_results.data_store_id_random;
            ae_ds_tmp.account_id = ds_results.account_id_random;
            ae_ds_tmp.code = ds_results.code; // This will overwrite whatever was passed in.
            ae_ds_tmp.name = ds_results.name;
            ae_ds_tmp.type = ds_results.type; // This will overwrite whatever was passed in.
            if (type == 'html') {
                ae_ds_tmp.html = ds_results.text;
                val_html = ds_results.text;
                return ds_results.html;
            } else if (type == 'json') {
                ae_ds_tmp.json = ds_results.json;
                val_json = ds_results.json;
                return ds_results.json;
            } else if (type == 'md') {
                ae_ds_tmp.text = ds_results.text;
                val_md = ds_results.text;
                return ds_results.text;
            } else if (type == 'sql') {
                ae_ds_tmp.text = ds_results.text;
                val_sql = ds_results.text;
                return ds_results.text;
            } else {
                ae_ds_tmp.text = ds_results.text;
                val_text = ds_results.text;
                return ds_results.text;
            }
        } else {
            ds_loaded = false;
            ds_loading_status = '-- not found --';
        }
    })
    .catch(function (error) {
        console.log(`Something went wrong. for code ${code}`);
        console.log(error);
        ds_loading_status = '-- error --';
        return false;
    });
    // .finally(function (ds_val_result) {
    //     // console.log(`ae_ ds_code_val = `, ds_val_result);

    //     // ae_ds_loc.set(ds_val_result);
    //     // localStorage.setItem(ds_code, ds_val_result);
    //     // sessionStorage.setItem(ds_code, ds_val_result);

    //     // return ds_val_result;
    // });
    // console.log(`ae_ ds_code_val = `, ds_code_val);
}


async function handle_submit_form(event: any) {
    // console.log('*** handle_submit_form() ***');

    $ae_sess.ds.submit_status = 'processing';


    // Data in
    let form_data = new FormData(event.target);
    // console.log(form_data);

    let data_store_di: key_val = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
    // console.log(data_store_di);

    // Data out
    let data_store_do: key_val = {};

    if (typeof data_store_di.ds_id_random !== 'undefined') {
        data_store_do['data_store_id_random'] = data_store_di.ds_id_random;
    }

    // if (!$slct.data_store_id) {
    if (!ae_ds_tmp.id) {
        data_store_do['account_id_random'] = $ae_loc.account_id;
    }

    if (typeof data_store_di.ds_account_id !== 'undefined' && data_store_di.ds_account_id && data_store_di.ds_use_account_id) {
        data_store_do['account_id_random'] = data_store_di.ds_account_id;
    } else if (data_store_di.ds_use_account_id && $ae_loc.account_id) {
        data_store_do['account_id_random'] = $ae_loc.account_id;
    } else {
        data_store_do['account_id_random'] = null;
    }

    if (typeof data_store_di.ds_code !== 'undefined') {
        data_store_do['code'] = data_store_di.ds_code;
    } else {
        data_store_do['code'] = ds_code;
    }

    if (typeof data_store_di.ds_name !== 'undefined') {
        data_store_do['name'] = data_store_di.ds_name;
    } else {
        data_store_do['name'] = ds_name;
    }

    if (typeof data_store_di.ds_type !== 'undefined') {
        data_store_do['type'] = data_store_di.ds_type;
    } else {
        data_store_do['type'] = ds_type;
    }

    if (typeof data_store_di.ds_for_type !== 'undefined' && data_store_di.ds_for_type) {
        data_store_do['for_type'] = data_store_di.ds_for_type;
    } else {
        data_store_do['for_type'] = null;
    }

    if (typeof data_store_di.ds_for_id !== 'undefined' && data_store_di.ds_for_id) {
        data_store_do['for_id_random'] = data_store_di.ds_for_id;
    } else {
        data_store_do['for_id_random'] = null;
    }

    if (typeof data_store_di.ds_access_read !== 'undefined') {
        data_store_do['access_read'] = data_store_di.ds_access_read;
    }

    if (typeof data_store_di.ds_access_write !== 'undefined') {
        data_store_do['access_write'] = data_store_di.ds_access_write;
    }

    if (typeof data_store_di.ds_access_delete !== 'undefined') {
        data_store_do['access_delete'] = data_store_di.ds_access_delete;
    }

    if (typeof data_store_di.ds_value !== 'undefined') {
        if (data_store_di.ds_type == 'html') {
            data_store_do['text'] = data_store_di.ds_value;
        } else if (data_store_di.ds_type == 'json') {
            data_store_do['json'] = data_store_di.ds_value;
        } else if (data_store_di.ds_type == 'md') {
            data_store_do['text'] = data_store_di.ds_value;
        } else if (data_store_di.ds_type == 'sql') {
            data_store_do['text'] = data_store_di.ds_value;
        } else {
            data_store_do['text'] = data_store_di.ds_value;
        }
    }

    if (typeof data_store_di.ds_enable !== 'undefined') {
        data_store_do['enable'] = data_store_di.ds_enable;
    } else {
        data_store_do['enable'] = true;
    }

    console.log(data_store_do);

    if (!ae_ds_tmp.id) {
        // Create
        console.log(`ae_ Data Store Create:`, data_store_do);
        ds_submit_results = handle_create__data_store({
        obj_type: 'data_store',
        data: data_store_do
        })
        .then( function (ds_results) {
            console.log(`ae_ Data Store Create Results:`, ds_results);
            if (ds_results) {
                ae_ds_tmp.id = ds_results.data_store_id_random;
                ae_ds_tmp.updated_on = ds_results.updated_on;
            }
            return ds_results;
        })
        .finally(function (ds_val_result) {
            console.log(`ae_ ds_val_result = `, ds_val_result);
            trigger = 'load__ds__code';
            $ae_sess.ds.submit_status = 'created';
        });
    } else {
        // Update
        console.log(`ae_ Data Store Update:`, data_store_do);
        ds_submit_results = handle_update__data_store({
        obj_type: 'data_store',
        obj_id: ae_ds_tmp.id,
        data: data_store_do
        })
        .then( function (ds_results) {
            console.log(`ae_ Data Store Update Results:`, ds_results);
            if (ds_results) {
                ae_ds_tmp.updated_on = ds_results.updated_on;
            }
            return ds_results;
        // })
        // .finally(function (ds_val_result) {
        //     // console.log(`ae_ ds_code_val = `, ds_val_result);
        })
        .finally(function () {
            // console.log(`ae_ ds_val_result = `, ds_val_result);
            console.log(`ae_ load__ds__code: ${ds_code} ${ds_type} ${for_type} ${for_id} ${try_cache}`);
            trigger = 'load__ds__code';
            $ae_sess.ds.submit_status = 'updated';
        });
    }


}


async function handle_create__data_store({
        obj_type,
        data
        }) {
    console.log('*** handle_create__data_store() ***');

    $ae_sess.ds.create_status = 'starting';
    ae_promises.api_create__data_store_obj = api.create_ae_obj_crud({
        api_cfg: $ae_api,
        obj_type: obj_type,
        fields: data,
        key: $ae_api.api_crud_super_key,
        log_lvl: 1
        })
    .then(async function (create__obj_result) {
        if (!create__obj_result) {
            console.log('The result was null or false.');
            return false;
        }
        return create__obj_result;
    })
    .catch(function (error) {
        console.log('Something went wrong.');
        console.log(error);
        return false;
    })
    .finally(function (create__obj_result) {
        $ae_sess.ds.create_status = 'finished';
        return create__obj_result;
    });

    return ae_promises.api_create__data_store_obj;
}


async function handle_update__data_store({
        obj_type,
        obj_id,
        data
        }) {
    console.log('*** handle_update__data_store() ***');

    $ae_sess.ds.update_status = 'starting';
    ae_promises.update__data_store_obj = api.update_ae_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: obj_type,
        obj_id: obj_id,
        fields: data,
        key: $ae_api.api_crud_super_key,
        log_lvl: 1
        })
    .then(async function (update__obj_result) {
        if (!update__obj_result) {
            console.log('The result was null or false.');
            return false;
        }
        return update__obj_result;
    })
    .catch(function (error) {
        console.log('Something went wrong.');
        console.log(error);
        return false;
    })
    .finally(function (update__obj_result) {
        $ae_sess.ds.update_status = 'finished';
        return update__obj_result;
    })

    return ae_promises.update__data_store_obj;
}
</script>


<div
    class="ae__elem__data_store relative {class_li}"
    class:hide={hide}
    >
{#if ae_ds_tmp}


{#if debug || $ae_loc.debug == 'debug'}

    <pre>
    id: {ae_ds_tmp.id},
    code: {ae_ds_tmp.code},
    type: {ae_ds_tmp.type},
    for_type: {ae_ds_tmp.for_type},
    for_id: {ae_ds_tmp.for_id},
    access_read: {ae_ds_tmp.access_read},
    access_write: {ae_ds_tmp.access_write},
    access_delete: {ae_ds_tmp.access_delete},
    name: {ae_ds_tmp.name},
    html: {ae_ds_tmp.html},
    json: {ae_ds_tmp.json},
    md: {ae_ds_tmp.md},
    text: {ae_ds_tmp.text},
    updated_on: {ae_ds_tmp.updated_on},
    </pre>
{/if}

{#if show_edit}
    <section class="edit z-50">
    <form
        class="ae__elem__data_store__form"
        on:submit|preventDefault={handle_submit_form}
        >

    <input
        type="hidden"
        name="ds_id_random"
        value={ae_ds_tmp.id}
        />

    {#if $ae_loc.trusted_access}
        <label for="ds_use_account_id" class="label text-xs inline">Use Account ID
        <input
            type="checkbox"
            name="ds_use_account_id"
            class="checkbox"
            value="true"
            checked={ae_ds_tmp.account_id ? true : false}
            />
        </label>
    {/if}
    {#if $ae_loc.manager_access}
        <input
            type="text"
            name="ds_account_id"
            class="input max-w-48 text-xs"
            placeholder="Account ID"
            value={ae_ds_tmp.account_id}
            />

        <input
            type="text"
            name="ds_code"
            class="input text-xs"
            placeholder="Data store code"
            value={ae_ds_tmp.code}
            required
            />
    {/if}
    {#if $ae_loc.trusted_access}
        <input
            type="text"
            name="ds_name"
            class="input text-xs"
            placeholder="Data store name"
            value={ae_ds_tmp.name}
            required
            />
    {/if}
    {#if $ae_loc.manager_access}
        <input
            type="text"
            name="ds_type"
            class="input max-w-48 text-xs"
            placeholder="Data store type (html, json, md, sql, text)"
            value={ae_ds_tmp.type}
            required
            />
        <input
            type="text"
            name="ds_for_type"
            class="input max-w-48 text-xs"
            placeholder="Data store For Type"
            value={ae_ds_tmp.for_type}
            />
        <input
            type="text"
            name="ds_for_id"
            class="input max-w-48 text-xs"
            placeholder="Data store For ID"
            value={ae_ds_tmp.for_id}
            />
        <input
            type="text"
            name="ds_access_read"
            class="input max-w-48 text-xs"
            placeholder="Access read"
            value={ae_ds_tmp.access_read}
            />
        <input
            type="text"
            name="ds_access_write"
            class="input max-w-48 text-xs"
            placeholder="Access write"
            value={ae_ds_tmp.access_write}
            />
        <input
            type="text"
            name="ds_access_delete"
            class="input max-w-48 text-xs"
            placeholder="Access delete"
            value={ae_ds_tmp.access_delete}
            />
    {:else}
        Code: {ae_ds_tmp.code}
        <!-- Name: {ae_ds_tmp.name} -->
        Type: {ae_ds_tmp.type}
    {/if}

    <!-- Handle HTML type -->
    {#if ae_ds_tmp.type == 'html' || ae_ds_tmp.type == null}
    <textarea
        name="ds_value"
        class="textarea type_html font-mono text-sm"
        cols="75"
        rows="25"
        placeholder="Enter the HTML here"
        >{ae_ds_tmp.type == 'html' && ae_ds_tmp.html ? ae_ds_tmp.html : ''}</textarea>
    <!-- Handle SQL type -->
    {:else if ae_ds_tmp.type == 'sql'}
    <textarea
        name="ds_value"
        class="textarea type_sql font-mono text-sm"
        cols="75"
        rows="25"
        placeholder="Enter the SQL here"
        >{ae_ds_tmp.type == 'sql' && ae_ds_tmp.text ? ae_ds_tmp.text : ''}</textarea>

    <!-- Handle text type -->
    {:else if ae_ds_tmp.type == 'text'}
    <textarea
        name="ds_value"
        class="textarea type_text"
        cols="70"
        rows="10"
        placeholder="Enter the text here"
        >{ae_ds_tmp.type == 'text' ? ae_ds_tmp.text : ''}</textarea>
    {/if}
    <div class="flex gap-1 justify-center justify-evenly items-center p-1">

    <button
        type="button"
        class="btn variant-soft-warning"
        on:click={() => {
            if (confirm('Are you sure you want to delete this data store?')) {
                trigger = 'delete__ds__code';
                // $slct_trigger = 'delete__ds__code';
            }
            show_edit = false;
            show_view = true;
        }}
        >
        <span class="fas fa-trash mx-1"></span>
        Delete
    </button>

    <button
        type="button"
        class="btn variant-soft-primary"
        on:click={() => {
            show_edit = false;
            show_view = true;
        }}
        >
        <span class="fas fa-times mx-1"></span>
        Close
    </button>

    <button
        type="submit"
        class="btn variant-soft-primary"
        disabled={ds_submit_results instanceof Promise && !ds_submit_results}
        on:click={() => {
            trigger = 'save__ds__code';
            // $slct_trigger = 'save__ds__code';
        }}
        >
        <span class="fas fa-save mx-1"></span>
        Save
    </button>

    {#await ds_submit_results}
        <div class="modal-loading">
            <span class="fas fa-spinner fa-spin"></span>
            <span class="loading-text">
                Saving...
            </span>
        </div>
    {:then ds_submit_results}
        {#if ds_submit_results}
        <div>
            <span class="fas fa-check text-green-500"></span>
            <span class="saved-text">
                Saved
            </span>
        </div>
        {/if}
    {/await}

    <div
        class="ae_debug"
        class:hidden={!debug && $ae_loc.debug != 'debug'}
        >
    submit: {$ae_sess.ds.submit_status}
    create: {$ae_sess.ds.create_status}
    update: {$ae_sess.ds.update_status}
    </div>

    </div>

    </form>
    </section>
{/if}

<!-- {#if mode == 'view'} -->

{#if !ae_ds_tmp.type && !ae_ds_tmp.html && !ae_ds_tmp.json && !ae_ds_tmp.md && !ae_ds_tmp.text}
    {#if $ae_loc.manager_access}
        <span class="variant-soft-warning">No data found! Is the data store correct or new?</span>
    {:else}
        <!-- <span class="variant-soft">loading</span> -->
    {/if}
{/if}

{#if ae_ds_tmp.type == 'html' && ae_ds_tmp.html}
    {@html ae_ds_tmp.html}
{:else if ae_ds_tmp.type == 'html'}
    {#if $ae_loc.manager_access}
        <span class="variant-soft-warning">No HTML found! Is the data store type correct?</span>
    {:else}
        <!-- <span class="variant-soft">loading</span> -->
    {/if}
{/if}

{#if ae_ds_tmp.type == 'text' && ae_ds_tmp.text}
    {ae_ds_tmp.text}
{:else if ae_ds_tmp.type == 'text'}
    {#if $ae_loc.manager_access}
        <span class="variant-soft-warning">No text found! Is the data store type correct?</span>
    {:else}
        <!-- <span class="variant-soft">loading</span> -->
    {/if}
{/if}

<button
    type="button"
    class="ae_btn_edit__ds btn hover:variant-glass-warning text-xs absolute top-0 right-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200 m-1 p-1"
    class:opacity-5={!$ae_loc.manager_access}
    class:hidden={!show_edit_btn || !$ae_loc.trusted_access}
    on:dblclick={() => {
        trigger = 'load__ds__code';
        show_edit = true;
        show_view = false;
    }}
    title="Double click to edit data store: {ds_code} with {ae_ds_tmp.account_id ? `account ID=${ae_ds_tmp.account_id}` : 'no account ID'}"
    >
    <span class="fas fa-edit mx-1"></span>
    Edit
</button>

<!-- {/if} -->
{:else}
    <!-- Nothing to see yet -->
{/if}

<!-- Text:
<pre>
{val_text}
</pre> -->

<!-- JSON:
<pre>
{val_json}
</pre> -->

{#await ds_get_results}
    <div class="modal-loading text-xs absolute bottom-0 left-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200">
        <span class="fas fa-spinner fa-spin"></span>
        <span class="loading-text">
            Loading...
        </span>
    </div>
{/await}

<!-- {ds_loading_status} -->

</div>


<style lang="postcss">
/* .ae_btn_edit__ds {
    opacity: .5;
} */

/* The section.edit should be above the rest of the content and centered on the page */
section.edit {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: hsla(0, 0%, 100%, .95);
    padding: 1rem;
    border-radius: .5rem;
    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);

    min-width: 80%;
}

.hide {
    display: none;
}
</style>
