<div class="my-4 g-">
    <div class="offset-md-2 col-8 mr-2 py-3 context-main-bg p-3">
        <legend class="text-center">Unsorted Bookmarks</legend>
        <hr>
        {BKMTUTS}
        <p class="px-2">
            When you add bookmarks without a folder, they will be considered "Unsorted". There is nothing wrong with these bookmarks, 
            but much of the application relies on folder for organizing and displaying bookmarks. You may find that these bookmarks do not regularly appear in other sections of the application.
        </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}
        <table class="table table-striped context-main1">
            <thead>
                <tr>
                    <th style="width: 75%">Bookmark</th>
                    <th style="width: 10%"></th>
                    <th style="width: 5%"></th>
                    <th style="width: 5%"></th>
                    <th style="width: 5%"></th>
                </tr>
            </thead>
            <tbody>
                {LOOP}
                <tr>
                    <td style="text-align: center;">
                        <a href="{url}" class="text-decoration-none atb-green">
                            {title}
                        </a>
                    </td>
                    <td style="text-align: center;">
                            {privacy}
                    </td>
                    <td><a href="{ROOT_URL}bookmarks/bookmark/{ID}" class="btn btn-sm atb-green-outline"><i class="fa fa-fw fa-upload"></i></a></td>
                    <td><a href="{ROOT_URL}bookmarks/editBookmark/{ID}" class="btn btn-sm btn-outline-warning"><i class="fa fa-fw fa-pencil"></i></a></td>
                    <td><a href="{ROOT_URL}bookmarks/deleteBookmark/{ID}" class="btn btn-sm btn-outline-danger"><i class="fa fa-fw fa-trash"></i></a></td>
                </tr>
                {/LOOP}
                {ALT}
                <tr>
                    <td style="text-align: center;" colspan="6">
                        No results to show.
                    </td>
                </tr>
                {/ALT}
            </tbody>
        </table>
        <div class="text-center">
            <a href="{ROOT_URL}bookmarks/createBookmark" class="btn btn-lg atb-green-bg">Add</a>
        </div>
    </div>
</div>