{% macro ConfigReadme() %}
    <div class="col s12">
        <h4>Config.ini Readme
            <span><i class="material-icons-outlined modal-close right icon-btn">close</i></span>
        </h4>
    </div>
    <div id="config-help-col" class="col s12 theme-surface-1 padding-2 border-radius-10">
        <h5 class="theme-primary-text">Settings</h5>
        <code class="selectable-all">
            [Settings]<br>
            theme = dark<br>
            accent = orange<br>
            background = static/images/backgrounds/background.png<br>
        </code>

        <table class="mt-4 responsive-table">
            <thead>
            <tr class="theme-primary-text">
                <th>Variable</th>
                <th>Required</th>
                <th>Description</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody class="selectable">
            <tr>
                <td>[Settings]</td>
                <td>Yes</td>
                <td>Config section name.</td>
                <td>string</td>
            </tr>
            <tr>
                <td>theme</td>
                <td>Yes</td>
                <td>UI theme</td>
                <td>light, dark</td>
            </tr>
            <tr>
                <td>accent</td>
                <td>Yes</td>
                <td>UI accent color</td>
                <td>
                    orange, red, pink, purple, deepPurple, indigo, blue, lightBlue,
                    cyan, teal, green, lightGreen, lime, yellow, amber, deepOrange, brown, grey, blueGrey
                </td>
            </tr>
            <tr>
                <td>background</td>
                <td>Yes</td>
                <td>Background image for the UI</td>
                <td>/static/images/backgrounds/yourpicture.png, external link to image, None, random</td>
            </tr>
            <tr>
                <td>roles</td>
                <td>No</td>
                <td>User roles for access groups.</td>
                <td>string, if not defined, this is set to 'admin,user,public_user'. Note: admin, user, public_user roles are required and will be added automatically if omitted.</td>
            </tr>
            <tr>
                <td>home_access_groups</td>
                <td>No</td>
                <td>Define which access groups can access the /home page</td>
                <td>Roles defined in your config. If not defined, default is admin_only</td>
            </tr>
            <tr>
                <td>settings_access_groups</td>
                <td>No</td>
                <td>Define which access groups can access the /settings page</td>
                <td>Roles defined in your config. If not defined, default is admin_only</td>
            </tr>
            </tbody>
        </table>

        <h5 class="theme-primary-text">Apps</h5>
        <code class="selectable-all">
            [App Name]<br>
            prefix = https://<br>
            url = your-website.com<br>
            icon = static/images/apps/default.png<br>
            sidebar_icon = static/images/apps/default.png<br>
            description = Example description<br>
            open_in = iframe<br>
            data_template = None
        </code>

        <table class="mt-4 responsive-table">
            <thead>
            <tr class="theme-primary-text">
                <th>Variable</th>
                <th>Required</th>
                <th>Description</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody class="selectable">
            <tr>
                <td>[App Name]</td>
                <td>Yes</td>
                <td>The name of your app.</td>
                <td>string</td>
            </tr>
            <tr>
                <td>prefix</td>
                <td>Yes</td>
                <td>The prefix for the app's url.</td>
                <td>web prefix, e.g. http:// or https://</td>
            </tr>
            <tr>
                <td>url</td>
                <td>Yes</td>
                <td>The url for your app.</td>
                <td>web url, e.g. myapp.com</td>
            </tr>
            <tr>
                <td>icon</td>
                <td>No</td>
                <td>Icon for the dashboard.</td>
                <td>/static/images/icons/yourpicture.png, external link to image</td>
            </tr>
            <tr>
                <td>sidebar_icon</td>
                <td>No</td>
                <td>Icon for the sidenav.</td>
                <td>/static/images/icons/yourpicture.png, external link to image</td>
            </tr>
            <tr>
                <td>description</td>
                <td>No</td>
                <td>A short description for the app.</td>
                <td>string</td>
            </tr>
            <tr>
                <td>open_in</td>
                <td>Yes</td>
                <td>open the app in the current tab, an iframe or a new tab</td>
                <td>iframe, new_tab, this_tab</td>
            </tr>
            <tr>
                <td>data_template</td>
                <td>No</td>
                <td>Template for displaying variable(s) from rest data *Note: you must have a rest data variable set up in the config</td>
                <td>example: Data: {{ '{{ your_variable }}' }}</td>
            </tr>
            </tbody>
        </table>

        <h5 class="theme-primary-text">Access Groups</h5>

        <code class="selectable-all">
            [public]<br>
            roles = admin, user, public_user<br>
        </code>

        <table class="mt-4 responsive-table">
            <thead>
            <tr class="theme-primary-text">
                <th>Variable</th>
                <th>Required</th>
                <th>Description</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody class="selectable">
            <tr>
                <td>[Group Name]</td>
                <td>Yes</td>
                <td>Name for access group</td>
                <td>string</td>
            </tr>
            <tr>
                <td>roles</td>
                <td>Yes</td>
                <td>A comma separated list of user roles allowed to view apps in this access group</td>
                <td>Roles defined in your config. If not defined, defaults are admin and public_user</td>
            </tr>
            </tbody>
        </table>

        <h6 class="theme-primary-text">Note:</h6>
        <span class="theme-secondary-text mb-4">
            if no access groups are defined in the config, the application will create a default group called 'admin_only' with 'roles = admin'
        </span>

        <h5 class="theme-primary-text">Api Data</h5>
        <code class="selectable-all">
            [variable_name]<br>
            platform = rest<br>
            resource = your-website.com<br>
            value_template = variable_name<br>
        </code>

        <table class="mt-4 responsive-table">
            <thead>
            <tr class="theme-primary-text">
                <th>Variable</th>
                <th>Required</th>
                <th>Description</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody class="selectable">
            <tr>
                <td>[variable_name]</td>
                <td>Yes</td>
                <td>The variable to be made available to apps.</td>
                <td>variable (python syntax)</td>
            </tr>
            <tr>
                <td>platform</td>
                <td>Yes</td>
                <td>Platform for data source</td>
                <td>rest</td>
            </tr>
            <tr>
                <td>resource</td>
                <td>Yes</td>
                <td>The url for the api call.</td>
                <td>myapp.com/api/hello</td>
            </tr>
            <tr>
                <td>value_template</td>
                <td>No</td>
                <td>Tranform the data returned by the api call (python syntax)</td>
                <td>variable_name[0]['info']</td>
            </tr>
            <tr>
                <td>method</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
            </tr>

            <tr>
                <td>payload</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
            </tr>

            <tr>
                <td>authentication</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
            </tr>

            <tr>
                <td>username</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
            </tr>

            <tr>
                <td>password</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
                <td>NOT IMPLEMENTED</td>
            </tr>
            </tbody>
        </table>

        <h5 class="theme-primary-text">Api Data Example</h5>
        <p>Say we wanted to display how many Pokemon there are using the PokeAPI, we would add the following to the config:</p>
        <code class="selectable-all">
            [num_pokemon]<br>
            platform = rest<br>
            resource = https://pokeapi.co/api/v2/pokemon<br>
            value_template = num_pokemon['count']<br>
        </code>

        <p>Then in the config entry for the app you want to add this to, you would add:</p>

        <code class="selectable-all">
            data_template = Pokemon: {{ '{{ num_pokemon }}' }}
        </code>

    </div>
{% endmacro %}