<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>{{Name}} - {{Description}}</title>
    <link rel="stylesheet" type="text/css" href="/Plugins/ADSModule/Community.css" />
    <link type="text/css" href="/CSS/Fonts.css" rel="stylesheet" />
    <link type="text/css" href="/theme?v=2.7.2.0" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content="{{Name}} - Powered by CubeCoders AMP">
    <meta property="og:description" content="{{Description}}">
    <meta property="og:image" content="{{BannerImageURL}}">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="{{Name}} - Powered by CubeCoders AMP">
    <meta property="twitter:description" content="{{Description}}">
    <meta property="twitter:image" content="{{BannerImageURL}}">
    <script type="text/javascript" src="/Plugins/ADSModule/Community.js" defer></script>
    <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "gameServer",
          "brand": "CubeCoders",
          "users": "{{Users}}",
          "game": "{{GameName}}",
          "name": "{{Name}}",
          "image": "{{BannerImageURL}}",
          "description": "{{Description}}",
          "potentialAction": {
            "@type": "JoinAction",
            "target": "{{Endpoint}}"
          }
        }
    </script>
</head>
<body style="background-image: {{BackgroundURL}};" class="analytics-{{AnalyticsEnabled}}">
    <div class="ServerInfo">
        <div class="InfoHeader">
            <img class="BannerImage" src="{{BannerImageURL}}" />
            <div class="HeaderLines">
                <h1 class="ServerName">{{Name}}</h1>
                <h2 class="ServerDescription">{{Description}}</h2>
            </div>
            <div class="InfoStatus" style="background-color: {{StateColor}}">
                {{State}} <div class="mat-icon">{{StateIcon}}</div>
            </div>
        </div>
        <div class="InfoBody">
            <!--<h1 class="ServerName">Server Name</h1>
            <h2 class="ServerDescription">Server Description</h2>-->
            <p class="{{WelcomeClass}}">{{WelcomeMessage}}</p>
            <div class="ServerInfoLines">
                <div class="Line {{CommunityClass}}"><div class="mat-icon">public</div> <a href="{{CommunityURL}}">{{CommunityDisplayName}}</a></div>
                <div class="Line"><div class="mat-icon">location_on</div> {{Location}}</div>
                <div class="Line"><div class="mat-icon">settings_ethernet</div> <span id="endpointText">{{Endpoint}}</span> <button id="copyButton" label="Copy to Clipboard"><span class="mat-icon">content_copy</span></button></div>
                <div class="Line"><div class="mat-icon">group</div> {{Users}} active users</div>
                <!--<div class="Line"><div class="mat-icon">update</div> {{Uptime}}</div>-->
                <!--<div class="Line"><div class="mat-icon">event</div> No upcoming events</div>-->
            </div>
        </div>
        <hr />
        <div class="InfoActions">
            <!-- Join Server, Join Discord and Share buttons -->
            <!--<button class="JoinServer"><div class="mat-icon">open_in_new</div> Join Server</button>-->
            <a class="button JoinDiscord {{DiscordClass}}" href="{{DiscordURL}}" target="_blank"><div class="mat-icon">forum</div> Join Discord</a>
            <a class="button Connect {{EndpointClass}}" href="{{EndpointUri}}" target="_blank"><div class="mat-icon">settings_ethernet</div> Connect</a>
            <button class="Share" id="shareButton"><div class="mat-icon">share</div> Share</button>
        </div>
    </div>
    <img id="AMPLogo" src="/Images/FullLogo256.webp" alt="AMP Logo" />
</body>
</html>