{#if result}

{@html $t('home.new_note_notice')}

{:else}

{@html $t('home.intro')}

{#if file} (note.contents = f.detail)} /> {:else}

{/if}

<div class="bottom">
				<Switch class="file" label={$t('common.file')} bind:value={file} />
				<Switch label={$t('common.advanced')} bind:value={advanced} />
				<div class="grow" />
				<div class="tr">
					<small>{$t('common.max')}: <MaxSize /> </small>
					<br />
					<Button type="submit">{$t('common.create')}</Button>
				</div>
			</div>

{#if error}
				<div class="error-text">{error}</div>
			{/if}

<p>
				<br />
				{#if loading}
					{$t('common.loading')}
				{:else}
					{message}
				{/if}
			</p>

{#if advanced}
				<div transition:blur={{ duration: 250 }}>
					<br />
					<div class="fields">
						<TextInput
							type="number"
							label={$t('common.views', { values: { n: 0 } })}
							bind:value={note.views}
							disabled={timeExpiration}
							max={100}
						/>
						<div class="middle-switch">
							<Switch label={$t('common.mode')} bind:value={timeExpiration} color={false} />
						</div>
						<TextInput
							type="number"
							label={$t('common.minutes', { values: { n: 0 } })}
							bind:value={note.expiration}
							disabled={!timeExpiration}
							max={360}
						/>
					</div>
				</div>
			{/if}
		</fieldset>
	</form>
{/if}

.bottom :global(.file) {
		margin-right: 0.5rem;
	}

.grow {
		flex: 1;
	}

.middle-switch {
		margin: 0 1rem;
	}

.error-text {
		margin-top: 0.5rem;
	}

.fields {
		display: flex;
	}
</style>