<div class="col-10 offset-md-1 context-main-bg p-4 my-5">
    <legend class="text-center">Mobile Bookmarklet</legend>
    <hr>
    <div class="col-8 offset-2 ">
        <div class="h5">
            <p>
                You can quickly and easily add bookmarks to your AllTheBookmarks account from any mobile device. 
                Since you can't use extensions on mobile, you can log in from your mobile device and visit this page. 
            </p>
            <p>
                Below is a code snippet that you can copy. Copy the code, then create a new bookmark on your mobile device as you would normally. 
                Before saving the bookmark, change the name to something simple like "ATB Bookmarker" and paste this code as the url.
            </p>
            <p>
                Once you have the bookmarklet saved, you can simply go to your mobile bookmarks while on a page and this snippet will grab the info you need and add it to you account.
            </p>
        </div>
        <div class="context-second-bg p-4 border m-4">
            <form method="post">
                <fieldset>
                    <!-- Privacy -->
                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
                        <div class="me-3 fw-bold">Default privacy:</div>
                        <div class="">
                            <select id="privacy" name="privacy" class="form-control">
                                <option value="private">Private</option>
                                <option value="public">Public</option>
                            </select>
                        </div>
                    </div>
                    <!-- Description -->
                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
                        <div class="me-3 fw-bold">Ask for Description:</div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="includeDescription" name="includeDescription"{editModeSwitch_IS_CHECKED}>
                            <label class="form-check-label" for="includeDescription"></label>
                        </div>
                    </div>
                    <!-- Color -->
                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
                        <div class="me-3 fw-bold">Include a default color:</div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="includeColor" name="includeColor"{editModeSwitch_IS_CHECKED}>
                            <label class="form-check-label" for="includeColor"></label>
                        </div>
                        <div class="">
                            {colorSelect}
                        </div>
                    </div>
                    <!-- Folder -->
                    <div class="d-flex align-items-center border p-2 rounded mb-3 context-main-bg">
                        <div class="me-3 fw-bold">Include a default folder:</div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="includeFolder" name="includeFolder"{editModeSwitch_IS_CHECKED}>
                            <label class="form-check-label" for="includeFolder"></label>
                        </div>
                        <div class="">
                            {folderSelect}
                        </div>
                    </div>
                </fieldset>
                <div class="card-footer d-flex justify-content-center align-items-center context-main-bg">
                    <button type="submit" name="submit" value="submit" class="btn btn-md atb-green-outline my-2">Refresh Code</button>
                </div>
            </form>
        </div>
        
        <div class="context-second-bg p-4">
            <pre lang="javascript">
                javascript:(function() {
                    const apiKey = "{BK_API_KEY}";
                    const apiUrl = "{BK_API_URL}";
                    const url = window.location.href;
                    const name = prompt("Enter a name for the bookmark:");
                    {BK_JS_NOTES}
                    {BK_JS_COLOR}
                    {BK_JS_PRIVACY}
                    {BK_JS_FOLDER}

                    if (!name) {
                        alert("Name is required.");
                        return;
                    }
                
                    fetch(apiUrl + 'api/bookmarks/create', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${apiKey}`
                        },
                        body: JSON.stringify({ name, url, notes, color, privacy, folder })
                    })
                    .then(response => {
                        if (response.ok) {
                            alert("Bookmark saved successfully!");
                        } else {
                            alert("Failed to save bookmark. Please check your API key.");
                        }
                    })
                    .catch(error => {
                        console.error(error);
                        alert("An unknown error occurred while saving the bookmark.");
                    });
                })();
            </pre>
        </div>
    </div>
</div>