Add hint to providers

src/oidc_test/templates/home.html

@@ -1,20 +1,72 @@
 {% extends "base.html" %}
 {% block content %}
+<style>
+ .login-box {
+   text-align: center;
+   background-color: floralwhite;
+   margin: 0 auto;
+   width: fit-content;
+   border: 1px solid grey;
+ }
+ .login-box p {
+   margin: 0;
+ }
+ .login-box .description {
+   font-style: italic;
+ }
+ .providers {
+   margin: 0.5em auto;
+   justify-content: center;
+   padding: 0.8em;
+ }
+ .providers .provider {
+   height: 2em;
+ }
+ .providers .provider a {
+   background-color: lightblue;
+   border-radius: 8px;
+   padding: 6px;
+   text-align: center;
+   color: black;
+   text-decoration: none;
+   font-weight: bold;
+ }
+ .providers .provider .hint {
+   font-size: 80%;
+   max-width: 12em;
+ }
+ .providers .provider .provider-link {
+   text-align: center;
+ }
+ .providers .error {
+   color: darkred;
+   padding: 3px 6px;
+   text-align: center;
+   font-weight: bold;
+   flex: 1 1 auto;
+ }
+</style>
   <p class="center">
     Test the authentication and authorization of FastAPI web based applications
     with OpenID Connect and OAuth2 with different providers.
   </p>
   {% if not user %} 
   <div class="login-box">
-    <div class="login-toolbox">
-      <p>Log in with one of these authentication providers:</p>
+    <p class="description">Log in with one of these authentication providers:</p>
+    <table class="providers">
       {% for provider in settings.oidc.providers %}
-        <a href="login/{{ provider.id }}">{{ provider.name }}</a>
+      <tr class="provider">
+        <td class="provider-link">
+          <a href="login/{{ provider.id }}">{{ provider.name }}</a>
+        </td>
+        <td class="hint">{{ provider.hint }}</div>
+        </td>
+      </tr>
       {% else %}
-        <span class="error">There is no authentication provider defined.
-        Hint: check the settings.yaml file.</span>
+        <div class="error">There is no authentication provider defined.
+        Hint: check the settings.yaml file.</div>
       {% endfor %}
-    </div>
+    </table>
   </div>
   {% endif %}
   {% if user %}