{{define "app_detail"}}
  <div class="apps-page">
    {{if .Data.Error}}
    <div class="apps-alert">{{.Data.Error}}</div>
    {{end}}

    <div class="app-detail">
      <div class="app-detail-head">
        <span class="app-icon app-icon-lg">{{.Data.App.Icon}}</span>
        <div class="app-detail-title">
          <h1>{{.Data.App.Name}}</h1>
          <div class="app-meta">
            <span class="app-type">{{if eq .Data.App.Type "module"}}模块{{else if eq .Data.App.Type "plugin"}}插件{{else}}主题{{end}}</span>
            <span class="app-dot">·</span>
            <span>作者：{{.Data.App.Author}}</span>
            <span class="app-dot">·</span>
            <span>独立版本 {{verTag .Data.App.Version}}</span>
            {{if .Data.App.BuiltIn}}<span class="app-dot">·</span><span class="app-badge">{{if .Data.App.DisableOnly}}默认模块{{else}}内置{{end}}</span>{{end}}
          </div>
        </div>
        <div class="app-state app-state-lg {{if .Data.App.Installed}}on{{else}}off{{end}}">{{if .Data.App.Installed}}已开启{{else}}未开启{{end}}</div>
      </div>

      <p class="app-desc app-desc-lg">{{.Data.App.Description}}</p>

      {{if .CSRF}}
      <div class="app-detail-acts">
        {{template "app_toggle" dict "App" .Data.App "CSRF" .CSRF}}
        {{if .Data.App.Installed}}<a class="btn btn-ghost btn-sm" href="{{.Data.App.Home}}" target="_blank" rel="noopener">进入{{.Data.App.Name}}</a>{{end}}
        {{if and .Data.App.Installed .Data.App.Backend}}<a class="btn btn-ghost btn-sm" href="{{.Data.App.Backend}}">后台管理</a>{{end}}
      </div>
      {{else}}
      <div class="app-detail-acts">
        <a class="btn btn-ghost btn-sm" href="/admin/login">登录后可操作</a>
      </div>
      {{end}}

      {{if .Data.App.DisableOnly}}
      <div class="app-tip">内置模块不提供卸载，只支持「启用 / 关闭」：关闭后前台入口隐藏，数据原样保留，随时可以重新启用。</div>
      {{end}}
      {{if eq .Data.App.Type "module"}}
      <div class="app-tip">模块是站点的功能骨架：系统至少需要一个模块保持开启，才能稳稳运转。关闭最后一个模块会被拒绝。</div>
      {{end}}

      <section class="apps-section app-changelog" id="changelog">
        <h2><span class="apps-sec-dot"></span> 更新日志</h2>
        {{if .Data.App.Changelog}}
        {{range .Data.App.Changelog}}
        <article class="app-cl-item">
          <div class="app-cl-head">
            <span class="app-cl-ver">{{verTag .Version}}</span>
            <span class="app-cl-date">{{.Date}}</span>
          </div>
          <ul>
            {{range .Items}}
            <li>{{.}}</li>
            {{end}}
          </ul>
        </article>
        {{end}}
        {{else}}
        <p class="apps-empty">这个应用还没有更新日志，等它的第一版发布吧。</p>
        {{end}}
      </section>

      <div class="app-detail-back">
        <a href="/apps" class="btn btn-ghost btn-sm">← 返回应用中心</a>
      </div>
    </div>
  </div>
{{end}}