1html[lang="en"](
2 head(
3 title("Select An Identity Provider")
4 meta[charset="UTF-8"]
5 meta[http-equiv="X-UA-Compatible" content="IE=edge"]
6 meta[name="viewport" content="width=device-width,initial-scale=1"]
7 link[rel="icon" href="data:,"]
8 link[rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.7.5/semantic.min.css" integrity="sha256-S4n5rcKkPwT9YZGXPue8OorJ7GCPxBA5o/Z0ALWXyHs=" crossorigin="anonymous"]
9 style("
10 body > div { margin: 1em; }
11 body { max-width: 75em; }
12 form .ui.button { margin: 1em 0; }
13 .prov { display: inline-flex; flex-direction: column-reverse; justify-content: center; align-items: center; margin: 1em; }
14 label { display: flex; flex-direction: column; }
15 object { display: block; }
16 ")
17 )
18 body(
19 div[class="ui main menu"](
20 div[class="right item"](
21 span("Powered by")
22 a[href="https://github.com/nektro/zig-oauth2"]("ZigOAuth2")
23 )
24 )
25 div(
26 form[action="login" method="get"](
27 fieldset(
28 legend("Select a Provider:")
29 {#each clients}
30 div[class="prov"](
31 input[type="radio" name="with" value=({this.provider.id}) id=("p-"{this.provider.id})]
32 label[for=("p-"{this.provider.id})](
33 object[type="image/svg+xml" height="48" data=({this.provider.logo})]
34 div({#domain this.provider})
35 )
36 )
37 /each/
38 )
39 button[class="ui button" type="submit"]("Login")
40 )
41 )
42 )
43)