{{template "admin/layout_head" (dict "pageClass" "admin branding")}}
	<div class="admin-setting-content">
		<h4 class="ui top attached header">
			{{svg "octicon-paintbrush" 16}} Branding
		</h4>
		<div class="ui attached segment">

			<!-- Text Branding -->
			<h5>Identity</h5>
			<form method="post" action="{{AppSubUrl}}/-/admin/branding/settings">
				{{.CsrfTokenHtml}}
				<table class="ui very basic table">
					<tbody>
						<tr>
							<td style="width: 30%;"><strong>Application Name</strong><div class="tw-text-text-light tw-text-sm">Shown in page titles, emails, and footer</div></td>
							<td><input type="text" name="app_name" value="{{AppName}}" class="tw-w-full" placeholder="MokoGitea"></td>
						</tr>
						<tr>
							<td><strong>Description</strong><div class="tw-text-text-light tw-text-sm">Meta description for SEO and social sharing</div></td>
							<td><input type="text" name="description" value="{{.MetaDescription}}" class="tw-w-full" placeholder="Self-hosted Git service"></td>
						</tr>
						<tr>
							<td><strong>Help URL</strong><div class="tw-text-text-light tw-text-sm">Knowledge base or documentation link shown in help menus</div></td>
							<td><input type="text" name="help_url" value="{{.HelpURL}}" class="tw-w-full" placeholder="https://code.mokoconsulting.tech/MokoConsulting/MokoGitea/wiki"></td>
						</tr>
						<tr>
							<td><strong>Support URL</strong><div class="tw-text-text-light tw-text-sm">Ticket system, email, or contact page for user support requests</div></td>
							<td><input type="text" name="support_url" value="{{.SupportURL}}" class="tw-w-full" placeholder="https://mokoconsulting.tech/support"></td>
						</tr>
						<tr>
							<td><strong>Author</strong><div class="tw-text-text-light tw-text-sm">Meta author tag</div></td>
							<td><input type="text" name="author" value="{{.MetaAuthor}}" class="tw-w-full" placeholder="Moko Consulting"></td>
						</tr>
					</tbody>
				</table>
				<button type="submit" class="ui primary small button tw-mt-2">{{svg "octicon-check" 14}} Save Settings</button>
			</form>

			<div class="ui divider"></div>

			<!-- Image Branding -->
			<h5>Images</h5>
			<p class="tw-text-text-light tw-text-sm">Changes take effect immediately.</p>
			<table class="ui very basic table">
				<thead>
					<tr>
						<th style="width: 30%;">Setting</th>
						<th style="width: 40%;">Upload</th>
						<th style="width: 30%;">Preview</th>
					</tr>
				</thead>
				<tbody>
					<!-- Nav Icon -->
					<tr>
						<td>
							<strong>Nav Icon</strong> {{if .HasNavIcon}}<span class="ui mini green label">Custom</span>{{else}}<span class="ui mini grey label">Default</span>{{end}}
							<div class="tw-text-text-light tw-text-sm tw-mt-1">Top-left corner across all pages. Square, 30x30px.</div>
						</td>
						<td>
							<form method="post" action="{{AppSubUrl}}/-/admin/branding/upload" enctype="multipart/form-data">
								{{.CsrfTokenHtml}}
								<input type="hidden" name="type" value="nav-icon">
								<input type="file" name="file" accept="image/png,image/svg+xml" required class="tw-mb-2" style="max-width: 100%;">
								<br><button type="submit" class="ui primary mini button">{{svg "octicon-upload" 12}} Upload</button>
								{{if .HasNavIcon}}<a href="{{AppSubUrl}}/-/admin/branding/reset?type=nav-icon" class="ui mini button tw-ml-2">{{svg "octicon-sync" 12}} Reset</a>{{end}}
							</form>
						</td>
						<td class="tw-text-center" style="background: var(--color-secondary); border-radius: var(--border-radius);">
							<img src="{{AssetUrlPrefix}}/img/logo-small.png?v={{ctx.CspScriptNonce}}" style="max-height: 48px; max-width: 48px; object-fit: contain;" onerror="this.src='{{AssetUrlPrefix}}/img/logo.png'">
						</td>
					</tr>

					<!-- Login Logo -->
					<tr>
						<td>
							<strong>Login Logo</strong> {{if .HasLoginLogo}}<span class="ui mini green label">Custom</span>{{else}}<span class="ui mini grey label">None</span>{{end}}
							<div class="tw-text-text-light tw-text-sm tw-mt-1">Login page and homepage. Wide format, max 220px. Hidden when not set.</div>
						</td>
						<td>
							<form method="post" action="{{AppSubUrl}}/-/admin/branding/upload" enctype="multipart/form-data">
								{{.CsrfTokenHtml}}
								<input type="hidden" name="type" value="login-logo">
								<input type="file" name="file" accept="image/png,image/svg+xml" required class="tw-mb-2" style="max-width: 100%;">
								<br><button type="submit" class="ui primary mini button">{{svg "octicon-upload" 12}} Upload</button>
								{{if .HasLoginLogo}}<a href="{{AppSubUrl}}/-/admin/branding/reset?type=login-logo" class="ui mini button tw-ml-2">{{svg "octicon-sync" 12}} Reset</a>{{end}}
							</form>
						</td>
						<td class="tw-text-center" style="background: var(--color-secondary); border-radius: var(--border-radius);">
							{{if .HasLoginLogo}}<img src="{{AssetUrlPrefix}}/img/login-logo.png?v={{ctx.CspScriptNonce}}" style="max-height: 48px; max-width: 140px; object-fit: contain;">{{else}}<span class="tw-text-text-light">Not set</span>{{end}}
						</td>
					</tr>

					<!-- Favicon -->
					<tr>
						<td>
							<strong>Favicon</strong> {{if .HasFavicon}}<span class="ui mini green label">Custom</span>{{else}}<span class="ui mini grey label">Default</span>{{end}}
							<div class="tw-text-text-light tw-text-sm tw-mt-1">Browser tab and PWA app icon. Square, 256x256px.</div>
						</td>
						<td>
							<form method="post" action="{{AppSubUrl}}/-/admin/branding/upload" enctype="multipart/form-data">
								{{.CsrfTokenHtml}}
								<input type="hidden" name="type" value="favicon">
								<input type="file" name="file" accept="image/png,image/svg+xml,image/x-icon" required class="tw-mb-2" style="max-width: 100%;">
								<br><button type="submit" class="ui primary mini button">{{svg "octicon-upload" 12}} Upload</button>
								{{if .HasFavicon}}<a href="{{AppSubUrl}}/-/admin/branding/reset?type=favicon" class="ui mini button tw-ml-2">{{svg "octicon-sync" 12}} Reset</a>{{end}}
							</form>
						</td>
						<td class="tw-text-center" style="background: var(--color-secondary); border-radius: var(--border-radius);">
							<img src="{{AssetUrlPrefix}}/img/favicon.png?v={{ctx.CspScriptNonce}}" style="max-height: 48px; max-width: 48px; object-fit: contain;">
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
{{template "admin/layout_footer" .}}
