<div class="container p-4 context-main-bg my-4">
    <h1 class="mb-4">Frequently Asked Questions</h1>
    <hr>

    <!-- Table of Contents -->
    <div class="mb-4">
        <h2 class="h4 atb-green">General Questions</h2>
        <ul class="list-unstyled">
            <li><a href="#generalHeading1" class="text-decoration-none context-main">Does this work on mobile?</a></li>
            <li><a href="#generalHeading2" class="text-decoration-none context-main">Does this work on Mac / PC / Linux?</a></li>
            <li><a href="#generalHeading3" class="text-decoration-none context-main">I have a ton of bookmarks, how can I add them all to allthebookmarks?</a></li>
            <li><a href="#generalHeading4" class="text-decoration-none context-main">I have everything organized now, how do I add the bookmarks back?</a></li>
        </ul>
    </div>

    <!-- Accordion for General Questions -->
    <div class="accordion mb-5" id="generalAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header context-second-bg" id="generalHeading1">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                    Does this work on mobile?
                </button>
            </h2>
            <div id="collapse1" class="accordion-collapse collapse" aria-labelledby="generalHeading1" data-bs-parent="#generalAccordion">
                <div class="ml-5 accordion-body context-main context-main-bg" id="general1">
                    <span class="atb-green">
                        Yes, the web app works seamlessly on mobile devices. At this time, the app is being optimized for even better mobile friendly use.
                        While our browser extensions cannot be used on mobile, users are given the ability to use our bookmarklet.
                        The Bookmarklet is similar to a small app you can save in your mobile browser. More information can be found on our extensions page.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="generalHeading2">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                    Does this work on Mac/PC/Linux?
                </button>
            </h2>
            <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="generalHeading2" data-bs-parent="#generalAccordion">
                <div class="accordion-body context-main context-main-bg" id="general2">
                    <span class="atb-green">
                        Yes, the web app is compatible with Mac, PC, and Linux platforms.
                        At this time, there is no extension support directly for safari, but you can use one of the other available browsers on a Mac computer to achieve similar results.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="generalHeading3">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                    I have a ton of bookmarks, how can I add them all to allthebookmarks?
                </button>
            </h2>
            <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="generalHeading3" data-bs-parent="#generalAccordion">
                <div class="accordion-body context-main context-main-bg" id="general3">
                    <span class="atb-green">
                        All major browsers have a method for exporting bookmarks to a file. 
                        Conveniently, you can find a tutorial on this process for your browser, on our tutorials page.
                        Our members can access the bookmark imports feature which will allow you to take that file and upload all the bookmarks to your dashboard.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="generalHeading4">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
                    I have everything organized now, how do I add the bookmarks back?
                </button>
            </h2>
            <div id="collapse4" class="accordion-collapse collapse" aria-labelledby="generalHeading4" data-bs-parent="#generalAccordion">
                <div class="accordion-body context-main context-main-bg" id="general4">
                    <span class="atb-green">
                        All major browsers have a method for importing bookmarks from a file. 
                        Conveniently, you can find a tutorial on this process for your browser, on our tutorials page.
                        Our members can access the bookmark export feature which will allow you to generate a file from any number of folders and bookmarks on the site.
                        This file can be used to import all those bookmarks right into your browser of choice.
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4">
        <h2 class="h4 atb-green">Mobile Device Questions</h2>
        <ul class="list-unstyled">
            <li><a href="#mobileHeading1" class="text-decoration-none context-main">How do I add bookmarks on my mobile device?</a></li>
            <li><a href="#mobileHeading2" class="text-decoration-none context-main">How do I use the extension on my mobile device?</a></li>
            <li><a href="#mobileHeading3" class="text-decoration-none context-main">How do I add this to my phone like an app?</a></li>
        </ul>
    </div>

    <!-- Accordion for Mobile Questions -->
    <div class="accordion mb-5" id="mobileAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header context-second-bg" id="mobileHeading1">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
                    How do I add bookmarks on my mobile device?
                </button>
            </h2>
            <div id="collapse5" class="accordion-collapse collapse" aria-labelledby="mobileHeading1" data-bs-parent="#mobileAccordion">
                <div class="ml-5 accordion-body context-main context-main-bg" id="mobile1">
                    <span class="atb-green">
                        Adding bookmarks from your mobile device is incredibly easy with our bookmarklet, available for use on all mobile devices with supported web-browsing.
                        In addition to the bookmarklet, you always have the ability to add a bookmark directly from the web app here.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="mobileHeading2">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
                    How do I use the extension on my mobile device?
                </button>
            </h2>
            <div id="collapse6" class="accordion-collapse collapse" aria-labelledby="mobileHeading2" data-bs-parent="#mobileAccordion">
                <div class="accordion-body context-main context-main-bg" id="mobile2">
                    <span class="atb-green">
                        At this time, none of our browser extensions are directly supported on mobile. You can still utilize the web-app or mobile-bookmarklet from any device.
                        This is more of an industry choice than a design decision as most mobile browsers have no support at all for mobile extensions.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="mobileHeading3">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse7" aria-expanded="false" aria-controls="collapse7">
                    How do I add this to my phone like an app?
                </button>
            </h2>
            <div id="collapse7" class="accordion-collapse collapse" aria-labelledby="mobileHeading3" data-bs-parent="#mobileAccordion">
                <div class="accordion-body context-main context-main-bg" id="mobile3">
                    <span class="atb-green">
                        While there isn't currently and Android or iPhone app available, you can add shortcut to your phone's home-screen for easy access to our web-app.
                        We have tutorials on how to do this available for both iPhone and Android devices.
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4">
        <h2 class="h4 atb-green">Extension Questions</h2>
        <ul class="list-unstyled">
            <li><a href="#extensionHeading1" class="text-decoration-none context-main">Why isn't the extension in dark mode?</a></li>
            <li><a href="#extensionHeading2" class="text-decoration-none context-main">How do I switch-accounts or sign-out of the extension?</a></li>
            <li><a href="#extensionHeading3" class="text-decoration-none context-main">Folders in the extension don't match the folders on the site, what do I do?</a></li>
            <li><a href="#extensionHeading4" class="text-decoration-none context-main">I use the same Folder / Privacy / Color frequently, do i need to change it every time I bookmark something?</a></li>
        </ul>
    </div>

    <!-- Accordion for Extension Questions -->
    <div class="accordion mb-3" id="extensionAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header context-second-bg" id="extensionHeading1">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse8" aria-expanded="false" aria-controls="collapse8">
                    Why isn't the extension in dark mode?
                </button>
            </h2>
            <div id="collapse8" class="accordion-collapse collapse" aria-labelledby="extensionHeading1" data-bs-parent="#extensionAccordion">
                <div class="ml-5 accordion-body context-main context-main-bg" id="extension1">
                    <span class="atb-green">
                        While the site and extension both support Dark-Mode, they aren't sharing that setting between them both.
                        If you would like to change DarkMode in the web app, you can find the toggle in your profile settings.
                        If you would like to change DarkMode in the extension, you can find the toggle in your settings.
                        If you need more info on finding the extension settings, we have tutorials available that can help.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="extensionHeading2">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="false" aria-controls="collapse9">
                    How do I switch-accounts or sign-out of the extension?
                </button>
            </h2>
            <div id="collapse9" class="accordion-collapse collapse" aria-labelledby="extensionHeading2" data-bs-parent="#extensionAccordion">
                <div class="accordion-body context-main context-main-bg" id="extension2">
                    <span class="atb-green">
                        To Sign out, simply open the extension settings page and there should be a log-out button in grey, at the top-right of the page.
                        If you need more info on finding the extension settings, we have tutorials available that can help.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="extensionHeading3">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse10" aria-expanded="false" aria-controls="collapse10">
                    Folders in the extension don't match the folders on the site, what do I do?
                </button>
            </h2>
            <div id="collapse10" class="accordion-collapse collapse" aria-labelledby="extensionHeading3" data-bs-parent="#extensionAccordion">
                <div class="accordion-body context-main context-main-bg" id="extension3">
                    <span class="atb-green">
                        Unfortunately, as part of our commitment to your privacy, the extension works in a fairly one-sided manner.
                        This means the app is never pushing new data to your extension, instead the extension must request the list from the web-app.
                        In some cases this can lead to a miss-match between what you have saved in the app vs what you have available in the extension. 
                        To fix this, simply open the extension settings page. This should sync your folders with the web-app. 
                        If you need more info on finding the extension settings, we have tutorials available that can help.
                    </span>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header context-main context-second-bg" id="extensionHeading4">
                <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse11" aria-expanded="false" aria-controls="collapse11">
                    I use the same Folder / Privacy / Color frequently, do i need to change it every time I bookmark something?
                </button>
            </h2>
            <div id="collapse11" class="accordion-collapse collapse" aria-labelledby="extensionHeading4" data-bs-parent="#extensionAccordion">
                <div class="accordion-body context-main context-main-bg" id="extension4">
                    <span class="atb-green">
                        The extension settings page provides a convenient way to change your default settings when adding folders or bookmarks.
                        You can select the Folder, color, and privacy defaults all from a single page.
                        If you need more info on finding the extension settings, we have tutorials available that can help.
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>