working on project creation

frontend/src/routes/project/Create.svelte

@@ -2,18 +2,75 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
+
+    import CompanySelector from '../../Components/CompanySelector.svelte';
+    import Settings from './Settings.svelte';
+    let showSettings = $state(false);
+    let ready = $derived(!!project.name.trim())
+    let error = $state(null);
+
+    let project = $state({
+        name:'',
+        description:'',
+        settings:{
+            show_closed:false
+        }
+    });
+
+    async function onsubmit(ev){
+        ev.preventDefault();
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project`;
+        var resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: JSON.stringify(project)
+        });
+        if (resp.ok){
+            router.navigate('/project');
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    function onselect(company){
+        project.company_id = company.id;
+        console.log(project);
+    }
 </script>
 
-<fieldset>
-    <legend>
-        {t('create_new_project')}
-    </legend>
+<style>
+    label{ display: block }
+</style>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+<form {onsubmit}>
     <fieldset>
-        <legend>{t('basic_data')}</legend>
-        <span class="warn">Company Selector</span>
-        <label>
-            <input type="text" />
-            {t('Name')}
-        </label>
+        <legend>
+            {t('create_new_project')}
+        </legend>
+        <fieldset>
+            <legend>{t('basic_data')}</legend>
+            <label>
+                <CompanySelector caption={t('no_company')} {onselect} />
+                {t('company_optional')}
+            </label>
+            <label>
+                <input type="text" bind:value={project.name}/>
+                {t('Name')}
+            </label>
+            <label>
+                <textarea bind:value={project.description}></textarea>
+                {t('description')}
+            </label>
+            {#if !showSettings}
+                <button onclick={() => showSettings = true}>{t('extended_settings')}</button>
+                {/if}
+        </fieldset>
+        {#if showSettings}
+            <Settings bind:settings={project.settings}/>
+        {/if}
+        <button type="submit" disabled={!ready}>{t('create')}</button>
     </fieldset>
-</fieldset>
+</form>