<div id="postsync-plugin">

    <div class="navbar">
        <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
            <ul class="flex flex-wrap -mb-px">
                <li class="mr-2">
                    <a href="{{ pluginUrl }}admin.php?page=postsync-settings"
                       class="inline-block p-4 border-b-2 rounded-t-lg {{ pageId == 'settings' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300' }}">Settings</a>
                </li>
                <li class="mr-2">
                    <a href="{{ pluginUrl }}admin.php?page=postsync-logger"
                       class="inline-block p-4 border-b-2 rounded-t-lg {{ pageId == 'logger' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300' }}"
                       aria-current="page">
                        Logs</a>
                </li>
                <li class="mr-2">
                    <a href="{{ pluginUrl }}admin.php?page=postsync-permissions"
                       class="inline-block p-4 border-b-2 rounded-t-lg {{ pageId == 'permissions' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300' }}"
                       aria-current="page">
                        Permissions</a>
                </li>
            </ul>

        </div>
    </div>
    <div class="content">
        <div id="notifications-list" class="notifications">
        </div>
        <div class="wp-notices">
            <hr class="wp-header-end">
        </div>
        {% block content %}
            <div>

            </div>
        {% endblock %}
    </div>
</div>