<script>
    /* What a screen says when it is empty because of something the phone
       has not been told yet — with the row that tells it. Only the things
       actually missing are drawn, and nothing at all when both are
       answered, so a phone that is set up never sees this component. It
       does not ask for a password either: the Soulseek row goes to the
       card on Community and stops there.

       No props: it says the same thing on all four screens, because it is
       the same thing. The stub above it is each screen's own words. */
    import Icon from "../components/Icon.svelte";
    import { go } from "./nav.svelte.js";
    import { setup, needsFolder, needsAccount, chooseFolder } from "./setup.svelte.js";

    const folder = $derived(needsFolder());
    const account = $derived(needsAccount());
</script>

{#if folder || account}
    <div class="stub setup-note">
        <b>Two things make the rest of this work.</b>
        <div class="setup-rows">
            {#if folder}
                <button class="row" onclick={() => void chooseFolder()}>
                    <span class="lead"><Icon name="folder" size={20} /></span>
                    <span class="b"><span class="t">{setup.picking ? "Picking…" : "Choose your library folder"}</span><span class="m">music on this phone lives there; right now it is inside the app</span></span>
                    <span class="r"><Icon name="chevron-right" size={17} /></span>
                </button>
            {/if}
            {#if account}
                <button class="row" onclick={() => go("community")}>
                    <span class="lead"><Icon name="users" size={20} /></span>
                    <span class="b"><span class="t">Sign in on Soulseek</span><span class="m">search, streaming and Save all come off the network</span></span>
                    <span class="r"><Icon name="chevron-right" size={17} /></span>
                </button>
            {/if}
        </div>
    </div>
{/if}
