{{define "app_guide"}}
{{template "layout_start" .}}
{{template "app_shell_start" .}}

{{/* „UTMUTATO" — the app's own copy, and the WHOLE page for an app that is not installed yet.
     It replaces the old details page: description and screenshots, what it is for, the first steps,
     the guide the catalog carries, the questions people ask, and the official documentation.

     THE GUIDE RENDERS ONLY WHEN ITS AUTHOR NAMED THE VERSION THEY CHECKED IT AGAINST
     (AppGuide.Rendered). A guide walking the household through a screen two releases old is worse
     than no guide, so an unchecked one is not shown and the page says a guide is still to come.

     Everything here is PLAIN TEXT through html/template. No markdown, no raw HTML: a step that
     contains a tag is shown as the characters the author typed. */}}

<!-- Screenshots (graceful — hidden if assets don't exist) -->
<div class="app-screenshots" id="screenshots">
    <img src="{{screenshotURL .Meta.Slug 1}}" alt="" class="app-screenshot"
         onerror="this.style.display='none'">
    <img src="{{screenshotURL .Meta.Slug 2}}" alt="" class="app-screenshot"
         onerror="this.style.display='none'">
    <img src="{{screenshotURL .Meta.Slug 3}}" alt="" class="app-screenshot"
         onerror="this.style.display='none'">
</div>

{{if not .Deployed}}
{{/* The install button lives on this tab, because this tab IS the page for a not-installed app.
     The server refuses a non-installable template regardless; hiding the button keeps the page
     from offering an action that would be rejected. */}}
<div class="app-info-card" style="margin-top:1rem">
    {{if canInstall .Meta}}
    <a href="/apps/{{.Meta.Slug}}/install" class="btn btn-primary" data-install-cta="1"
       onclick="return checkBeforeDeploy(event, '{{.Stack.Name}}')">{{T "app_info.telepites"}}</a>
    {{else}}
    <p class="form-hint" data-not-installable="1">{{T "app_page.not_installable"}}</p>
    {{end}}
</div>
{{end}}

<div class="app-info-grid">
    {{if .AppInfo.UseCases}}
    <div class="app-info-card">
        <h3>{{T "app_info.mire_hasznalhato"}}</h3>
        <ul class="app-info-list">
            {{range .AppInfo.UseCases}}<li>{{.}}</li>{{end}}
        </ul>
    </div>
    {{end}}

    {{if .AppInfo.FirstSteps}}
    <div class="app-info-card">
        <h3>{{T "app_info.elso_lepesek"}}</h3>
        <ol class="app-info-list">
            {{range .AppInfo.FirstSteps}}<li>{{.}}</li>{{end}}
        </ol>
    </div>
    {{end}}

    {{if .AppInfo.Prerequisites}}
    <div class="app-info-card">
        <h3>{{T "app_info.elofeltetelek"}}</h3>
        <ul class="app-info-list">
            {{range .AppInfo.Prerequisites}}<li>{{.}}</li>{{end}}
        </ul>
    </div>
    {{end}}
</div>

{{/* THE GUIDE. */}}
{{if .AppInfo.Guide.Rendered}}
<div class="app-guide" data-guide="1" data-guide-checked="{{.AppInfo.Guide.CheckedVersion}}">
    {{- range .AppInfo.Guide.Sections}}
    <div class="app-info-card" style="margin-top:1rem" data-guide-section="1">
        <h3>{{.Title}}</h3>
        {{if .Intro}}<p>{{.Intro}}</p>{{end}}
        {{if .Steps}}
        <ol class="app-info-list">
            {{- range .Steps}}<li>{{.}}</li>{{end}}
        </ol>
        {{end}}
    </div>
    {{- end}}
    {{- if .AppInfo.Guide.FAQ}}
    <div class="app-info-card" style="margin-top:1rem" data-guide-faq="1">
        <h3>{{T "app_page.faq"}}</h3>
        <dl class="app-faq">
            {{- range .AppInfo.Guide.FAQ}}
            <dt>{{.Q}}</dt>
            <dd>{{.A}}</dd>
            {{- end}}
        </dl>
    </div>
    {{- end}}
</div>
{{else}}
<p class="form-hint" style="margin-top:1rem" data-guide-missing="1">{{T "app_page.guide_missing"}}</p>
{{end}}

<div class="app-info-grid">
    {{if .AppInfo.DocsURL}}
    <div class="app-info-card">
        <h3>{{T "app_info.dokumentacio"}}</h3>
        <p><a href="{{.AppInfo.DocsURL}}" target="_blank" class="app-info-link">{{T "app_info.hivatalos_dokumentacio"}}</a></p>
    </div>
    {{end}}</div>

{{template "app_press_script" .}}
{{template "layout_end" .}}
{{end}}