---
title: "Add Bookmark"
---
<main x-data="{
	store: null,
	categories: [],
	name: '',
	url: '',
	categoryId: '',
	newcategory: '',
	async saveBookmark() {
		if (!this.categoryId)
			this.categoryId = this.categories[0].id;
		if (!this.name || !this.url || (!this.categoryId && !this.newcategory))
			return;
		if (this.newcategory)
			this.categoryId = await this.store.createBookmarkCategory(this.newcategory);
		const result = await this.store.createBookmark(
			this.categoryId, this.name, this.url
		);
		if (result)
			window.close();
	},
	async init() {
		this.store = Alpine.store('alphabreed');
		this.store.backUrl = '/bookmarks/add/';
		const params = new URLSearchParams(window.location.search);
		this.name = params.get('name') || '';
		this.url = params.get('url') || '';

		const tokenOK = await this.store.checkToken();
		if (tokenOK)
			this.categories = await this.store.getBookmarkCategories();
	}
}">
	<div id="addcontent">
		<div class="field textfield">
			<label for="bookmarkname">Bookmark name</label>
			<input id="bookmarkname" type="text" x-model="name">
		</div>
		<div class="field textfield">
			<label for="bookmarkurl">URL</label>
			<input id="bookmarkurl" type="text" x-model="url">
		</div>
		<div class="field selectfield">
			<label for="bookmarkcategory">Category</label>
			<select id="bookmarkcategory" x-model="categoryId">
				<template x-for="category in categories" :key="category.id">
					<option :value="category.id" x-text="category.name" :selected="category.id == categoryId">
				</template>
			</select>
		</div>
		<div class="field textfield">
			<label for="bookmarknewcategory">New category</label>
			<input id="bookmarknewcategory" type="text" x-model="newcategory">
		</div>
		<div class="field buttons">
			<button @click="saveBookmark()">Save</button>
		</div>
	</div>
</main>