@page "/About"

<div class="row mx-2">
    <div class="col-12 col-xl-10 offset-xl-1">
        <div class="card shadow">
            <div class="card-header text-center">
                <div class="row">
                    <div class="col-4"></div>
                    <div class="col-4">
                        <h2>@Titolo</h2>
                    </div>
                    <div class="col-4">
                        <div class="badge rounded-pill bg-dark px-4 py-2">
                            <div class="px-1">
                                <a class="text-light" href="https://www.egalware.com/" target="_blank">powered by&nbsp;EgalWare &nbsp;<img width="24" class="img-fluid" src="img/LogoEgalware.svg" /></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-12 col-lg-6 py-3">
                        <img src="img/LogoMapoFull.png" class="img-fluid" />
                    </div>
                    <div class="col-lg-3"></div>
                    <div class="col-6">
                        <h4 class="card-title">@Messaggio</h4>
                        <br />
                        <p>MoonPro / MAPO sono una suite di applicazioni e dispositivi hw dedicati per l'IOT,l'industry 4.0 e la gestione automatizzata dei processi produttivi.</p>
                        <hr />
                        <p>Per maggiori informazioni <a href="http://www.steamware.net/iot" target="_blank">visita il link</a> sul nostro sito.</p>
                    </div>
                    <div class="col-6 text-end">
                        <div runat="server" id="divCheck" class="@mainCss">
                            <h4>Info installazione</h4>
                            <hr />
                            <div class="d-flex justify-content-between @remSrvCss">
                                <div class="px-1">
                                    <i class="fa fa-server" aria-hidden="true"></i> Remote Server:
                                </div>
                                <div class="px-1">
                                    <b>@ServerStatus</b>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="px-1">
                                    <i class="fa fa-certificate" aria-hidden="true"></i> Cliente:
                                </div>
                                <div class="px-1">
                                    <b>@Installazione</b>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="px-1">
                                    <i class="fa fa-desktop" aria-hidden="true"></i> App:
                                </div>
                                <div class="px-1">
                                    <b>@Applicazione</b>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between @licenseCss">
                                <div class="px-1">
                                    <i class="fa fa-users" aria-hidden="true"></i> Licenze:
                                </div>
                                <div class="px-1">
                                    <b title="# Licenze locali / # Licenze Remote">@Licenze</b>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between @expDateCss">
                                <div class="px-1">
                                    <i class="far fa-calendar-check" aria-hidden="true"></i> Scadenza:
                                </div>
                                <div class="px-1">
                                    <b>@($"{Scadenza:yyyy/MM/dd}")</b>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between @licenseCss">
                                <div class="px-1">
                                    <i class="fa fa-key" aria-hidden="true"></i> Key
                                </div>
                                <div class="px-1 w-75">
                                    <EgwCoreLib.Razor.CopyToClipboard Text="@MastKey" ShowText="true"></EgwCoreLib.Razor.CopyToClipboard>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>