{{template "base/head" .}}
<div role="main" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}" class="page-content home">
	<div class="gt-mb-5 gt-px-5">
		<div>
			<div class="custom-header" style="display:flex;flex-wrap:wrap;gap:12px;">
				<img class="logo" width="220" height="220" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}">
				<div class="hero">
					<h1 class="ui icon header title">
						{{AppName}}
					</h1>
					<h2>{{.locale.Tr "startpage.app_desc"}}</h2>
				</div>
			</div>
		</div>
			<div class="custom-card">
				<div class="header">
					{{if .ShowRegistrationButton}}
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
						<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
						</svg>
						<h3>Public instance</h3>
					{{else}}
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
						<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
						</svg>
						<h3>Private instance</h3>
					{{end}}
				</div>
				<div class="content">
					{{if .ShowRegistrationButton}}
						<h2>This is a public instance of gitea</h2>
						<p>Feel free to register and use this instance.</p>
						<p>But there are some rules:</p>
						<ul>
							<li>Be nice to each other</li>
							<li>Don't spam</li>
							<li>Don't abuse the system</li>
						</ul>
					{{else}}
						<h2>This is a private instance of gitea</h2>
						<p>It is not possible to register here. Please contact the administrator.</p>
					{{end}}
				</div>
				<div class="footer">
					<div style="display:flex;justify-content:flex-end;">
						{{if .ShowRegistrationButton}}
								<a href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}"><button class="sp-button ui button item{{if .PageIsSignIn}} active{{end}}" rel="nofollow">
									{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
								</button></a>
								<a href="{{AppSubUrl}}/user/sign_up{{if not .PageIsSignUp}}?redirect_to={{.CurrentURL}}{{end}}"><button class="sp-button ui button item{{if .PageIsSignUp}} active{{end}}" rel="nofollow">
									{{svg "octicon-person"}} {{ctx.Locale.Tr "register"}}
								</button></a>
						{{else}}
								<a href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}"><button class="sp-button ui button item{{if .PageIsSignIn}} active{{end}}" rel="nofollow">
									{{svg "octicon-sign-in"}} {{ctx.Locale.Tr "sign_in"}}
								</button></a>
						{{end}}
					</div>
				</div>
			</div>
        <style>
			.page-content.home .hero {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;
			}
            .sp-button {
                margin-top: 20px;
            }
			#navbar[aria-label="Navigation Bar"].light { 
				background: none;
				border-bottom: none;
			}
			#navbar[aria-label="Navigation Bar"] {
				border-bottom: none;
				background: none;
			}
			.page-footer {
				background: none;
				border-top: none;
			}
			body {
				margin: 0;
				padding: 0;
				//background-image: url("https://wallpaperaccess.com/full/8351153.gif");
				background-image: url("https://w.wallhaven.cc/full/o5/wallhaven-o5762l.png");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-blend-mode: multiply;
				background-color: #454545;
			}
			body:before {
				content: "";
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				backdrop-filter: blur(10px);
			}

			.page-content {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.center {
				text-align: center;
				color: #fff;
			}

			.page-content.home .hero {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				flex: 1;
				gap: 1px;
			}
			.page-content.home .hero h2{
				margin: 0;
			}
			@media (max-width: 1200px) {
				.page-content.home .custom-header {
					align-items: center;
					flex-direction: column;
					text-align: center !important;
				}
				.page-content.home .hero {
					align-items: center;
				}
			}

			div.custom-card {
				overflow: hidden;
				background: var(--color-box-body);
				box-shadow: 0 4px 12px 0 #0000008a;
				border: 1px solid #373e47;
				border-radius: 8px;
				padding: 0px;
				margin-top: 16px;
				width: 100%;
			}
			div.custom-card > .header {
				display: flex;
				padding: 12px;
				border-bottom: 1px solid #373e47;
			}
			div.custom-card > .header * {
				margin: 0;
			}
			div.custom-card > .header svg {
				display: block;
				width: 24px;
				height: 24px;
				margin-right: 8px;
				vertical-align: middle;
			}
			div.custom-card > .content {
				padding: 12px;
			}
			div.custom-card > .footer {
				display: flex;
				padding: 12px;
				border-top: 1px solid #373e47;
				justify-content: flex-end;
			}
		</style>
	</div>
</div>
{{template "base/footer" .}}