{{define "apps_index"}}
  <div class="apps-page">
    <div class="apps-hero">
      <h1>应用中心</h1>
      <p>装什么、用什么，都由你做主。每一个应用都自带独立的版本号与更新日志：装上即用，关了无痕，想再打开随时回来。</p>
      <p class="apps-hint">小提示：程序至少需要一个模块保持开启，才能稳稳地运转。</p>
    </div>

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

    <div class="apps-tabs" id="appsTabs">
      <button type="button" class="apps-tab active" data-panel="modules">模块<span class="apps-tab-count">{{len .Data.Modules}}</span></button>
      <button type="button" class="apps-tab" data-panel="plugins">插件<span class="apps-tab-count">{{len .Data.Plugins}}</span></button>
      <button type="button" class="apps-tab" data-panel="themes">主题<span class="apps-tab-count">{{len .Data.Themes}}</span></button>
    </div>

    <div class="apps-panels">
      <section class="apps-panel active" id="panel-modules">
        <div class="apps-grid">
          {{range .Data.Modules}}
          {{template "app_card" dict "App" . "CSRF" $.CSRF}}
          {{else}}
          <p class="apps-empty">暂无可用的模块。</p>
          {{end}}
        </div>
      </section>

      <section class="apps-panel" id="panel-plugins">
        <div class="apps-grid">
          {{range .Data.Plugins}}
          {{template "app_card" dict "App" . "CSRF" $.CSRF}}
          {{else}}
          <p class="apps-empty">暂无可用的插件。</p>
          {{end}}
        </div>
      </section>

      <section class="apps-panel" id="panel-themes">
        <div class="apps-grid">
          {{range .Data.Themes}}
          {{template "app_card" dict "App" . "CSRF" $.CSRF}}
          {{else}}
          <p class="apps-empty">暂无主题。站点现在穿着默认衣裳，换新衣裳的店还没开张。</p>
          {{end}}
        </div>
      </section>
    </div>
  </div>
{{end}}

{{define "app_card"}}
  <article class="app-card">
    <div class="app-card-head">
      <span class="app-icon">{{ico .App.Icon}}</span>
      <div class="app-card-title">
        <div class="app-card-name-line">
          <a class="app-name" href="/apps/{{.App.Key}}">{{.App.Name}}</a>
          {{if .App.BuiltIn}}<span class="app-badge">{{if .App.DisableOnly}}默认模块{{else}}内置{{end}}</span>{{end}}
        </div>
        <span class="app-meta">{{if eq .App.Type "module"}}模块{{else if eq .App.Type "plugin"}}插件{{else}}主题{{end}}</span>
      </div>
    </div>
    <p class="app-desc">{{.App.Description}}</p>
    <div class="app-card-info">
      <a class="info-item info-cl" href="/apps/{{.App.Key}}#changelog">更新日志</a>
      <span class="info-item">作者：{{.App.Author}}</span>
      <span class="info-item">{{verTag .App.Version}}</span>
    </div>
    <div class="app-card-foot">
      <span class="app-state {{if .App.Installed}}on{{else}}off{{end}}">{{if .App.Installed}}已开启{{else}}未开启{{end}}</span>
      <div class="app-acts">
        {{template "app_toggle" .}}
        {{if and .CSRF .App.Installed .App.Backend}}<a class="btn btn-ghost btn-sm" href="{{.App.Backend}}">管理</a>{{end}}
        <a class="btn btn-ghost btn-sm" href="/apps/{{.App.Key}}">详情</a>
      </div>
    </div>
  </article>
{{end}}

{{define "app_toggle"}}
  {{if .CSRF}}
    {{if .App.DisableOnly}}
      {{if .App.Installed}}
      <form method="post" action="/apps/{{.App.Key}}/toggle" class="app-act"><input type="hidden" name="csrf" value="{{.CSRF}}"><button class="btn btn-ghost btn-sm">关闭</button></form>
      {{else}}
      <form method="post" action="/apps/{{.App.Key}}/toggle" class="app-act"><input type="hidden" name="csrf" value="{{.CSRF}}"><button class="btn btn-primary btn-sm">启用</button></form>
      {{end}}
    {{else if .App.BuiltIn}}
      <span class="app-builtin">内置</span>
    {{else}}
      {{if .App.Installed}}
      <form method="post" action="/apps/{{.App.Key}}/toggle" class="app-act"><input type="hidden" name="csrf" value="{{.CSRF}}"><button class="btn btn-danger btn-sm">卸载</button></form>
      {{else}}
      <form method="post" action="/apps/{{.App.Key}}/install" class="app-act"><input type="hidden" name="csrf" value="{{.CSRF}}"><button class="btn btn-primary btn-sm">在线安装</button></form>
      {{end}}
    {{end}}
  {{else}}
    <a class="btn btn-ghost btn-sm" href="/admin/login">登录后可操作</a>
  {{end}}
{{end}}