<div class="my-4">
    <div class="offset-2 col-8 p-3 context-main-bg">
        <legend class="text-center">Dashboards</legend>
        <hr>
        {BKMTUTS}
        <p class="px-2">
            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
        </p>
        <p class="px-2">
            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
        </p>
        <p class="px-2 text-muted text-center">
            This explanation and others like it can be hidden in your <a href="/usercp/settings" class="text-decoration-none atb-green">Profile Settings</a>.
        </p>
        <hr>
        {/BKMTUTS}
        <div class="row g-3 text-center p-2">
            <table class="table context-main">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Description</th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {LOOP}
                    <tr>
                        <td class="">{title}</td>
                        <td>{description}</td>
                        <td><a href="{ROOT_URL}bookmarks/dashboard/{uuid}" class="btn btn-sm atb-green-bg"><i class="fa fa-fw fa-upload"></i></a></td>
                        <td><a href="{ROOT_URL}bookmarks/editDash/{ID}" class="btn btn-sm btn-warning"><i class="fa fa-fw fa-pencil"></i></a></td>
                        <td><a href="{ROOT_URL}bookmarks/deleteDash/{ID}" class="btn btn-sm btn-danger"><i class="fa fa-fw fa-trash"></i></a></td>
                    </tr>
                    {/LOOP}
                    {ALT}
                    <tr>
                        <td class="context-main" colspan="7">
                            No results to show.
                        </td>
                    </tr>
                    {/ALT}
                </tbody>
            </table>
            <div class="">
                <a href="{ROOT_URL}bookmarks/addDash" class="btn btn-lg atb-green-bg">Create</a>
            </div>
        </div>
    </div>
</div>