<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="robots" content="noindex, nofollow, noarchive">
        <title>Services</title>
        <meta name="description" content="Services">
        <meta name="author" content="msg systems">
        <meta name="keywords" content="project, server, service">
        <style type="text/css">
            html, body {
                background-color: #f0f0f0;
                font-family: sans-serif;
                font-size: 12pt;
                width: 100%;
                height: 100%;
                margin: 0;
            }
            .canvas {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .canvas .services {
                margin-top: 40px;
                width: 600px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
            .canvas .services .service {
                background-color: #ffffff;
                margin: 10px;
                border: 1px solid #d0d0d0;
                border-radius: 4px;
                width: auto;
                text-decoration: none;
            }
            .canvas .services .service:hover {
                border: 1px solid #64a3bb;
            }
            .canvas .services .service .name {
                width: 200px;
                padding: 8px;
                text-align: center;
                color: #333333;
                background-color: #d0d0d0;
                font-weight: bold;
            }
            .canvas .services .service:hover .name {
                color: #ffffff;
                background-color: #64a3bb;
            }
            .canvas .services .service .desc {
                width: 200px;
                height: 50px;
                overflow: hidden;
                padding: 8px;
                text-align: center;
                color: #333333;
            }
        </style>
    </head>
    <body>
        <div class="canvas">
            <div class="services">
                {{ range $paramUrlHost, $containers := groupByMulti $ "Env.PROXY_URL_HOST" "," }}
                {{ $containers := sortObjects $containers "Env.PROXY_SRV_NAME" }}
                {{ range $index, $container := $containers }}
                {{ $paramUrlScheme := $container.Env.PROXY_URL_SCHEME }}
                {{ $paramUrlPath   := $container.Env.PROXY_URL_PATH }}
                {{ $paramSrvName   := $container.Env.PROXY_SRV_NAME }}
                {{ $paramSrvDesc   := $container.Env.PROXY_SRV_DESC }}
                <a class="service" href="{{ $paramUrlScheme }}://{{ $paramUrlHost }}{{ $paramUrlPath }}">
                    <div class="name">{{ $paramSrvName }}</div>
                    <div class="desc">{{ $paramSrvDesc }}</div>
                </a>
                {{ end }}
                {{ end }}
            </div>
       </div>
    </body>
</html>
