{{template "base" .}}
{{define "content"}}
<div style="max-width:1400px">

  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
    <div>
      <div class="page-title">Hub</div>
      <div class="page-sub">Collections, parsers, scenarios, and postoverflows</div>
    </div>
    {{if .CLIAvailable}}
    <div style="display:flex;gap:8px">
      <button type="button" class="btn-secondary" onclick="promptInstallNew()">Install New...</button>
      <form method="POST" action="/hub/update">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
        <button type="submit" class="btn-secondary"
          data-confirm="Run hub update + upgrade? This may take a minute." data-confirm-label="Update">Update All</button>
      </form>
    </div>
    {{end}}
  </div>

  {{/* Hidden form used by Install New modal */}}
  <form id="install-new-form" method="POST" action="/hub/install" style="display:none">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <input type="hidden" name="tab"  value="{{.Tab}}">
    <input type="hidden" name="kind" value="{{.Tab}}">
    <input type="hidden" name="name" id="install-new-name" value="">
  </form>

  {{if not .CLIAvailable}}
  <div class="cli-unavail-banner" style="margin-bottom:16px">
    <div>
      <strong style="display:block;margin-bottom:4px">cscli unavailable</strong>
      Hub management requires the cscli binary.
    </div>
  </div>
  {{end}}

  <div class="panel">
    <div class="tab-bar">
      <a href="/hub?tab=collections"    class="tab-item{{if eq .Tab "collections"}} tab-item--active{{end}}">Collections</a>
      <a href="/hub?tab=parsers"        class="tab-item{{if eq .Tab "parsers"}} tab-item--active{{end}}">Parsers</a>
      <a href="/hub?tab=scenarios"      class="tab-item{{if eq .Tab "scenarios"}} tab-item--active{{end}}">Scenarios</a>
      <a href="/hub?tab=postoverflows"  class="tab-item{{if eq .Tab "postoverflows"}} tab-item--active{{end}}">Postoverflows</a>
    </div>

    {{if .CLIAvailable}}
    {{if .Items}}
    <div style="overflow-x:auto">
      <table class="data-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Version</th>
            <th>State</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {{$tab := .Tab}}
          {{range .Items}}
          {{$active := or .Installed .Downloaded (ne .Status "")}}
          {{$needsUpdate := eq .Status "update-available"}}
          <tr{{if .RemovedByUI}} style="opacity:0.7"{{end}}>
            <td>
              <div style="font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600">{{.Name}}</div>
              {{if .Description}}<div style="font-size:11px;color:var(--muted);margin-top:2px">{{truncate .Description 64}}</div>{{end}}
            </td>
            <td style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)">
              {{if .LocalVersion}}{{.LocalVersion}}{{else if and $active .Version}}{{.Version}}{{else}}—{{end}}
            </td>
            <td>
              {{if .Tainted}}
                <span class="badge badge-amber">tainted</span>
              {{else if $needsUpdate}}
                <span class="badge badge-amber">update available</span>
              {{else if $active}}
                <span class="badge badge-green">installed</span>
              {{else if .RemovedByUI}}
                <span class="badge badge-purple">removed</span>
              {{else}}
                <span class="badge badge-gray">not installed</span>
              {{end}}
            </td>
            <td style="display:flex;gap:6px;flex-wrap:wrap">
              {{if $active}}
                {{if .ConfigEditorURL}}
                <a href="{{.ConfigEditorURL}}" class="btn-ghost-sm">Edit Config</a>
                {{end}}
                <form method="POST" action="/hub/remove" style="display:inline">
                  <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                  <input type="hidden" name="kind" value="{{$tab}}">
                  <input type="hidden" name="tab"  value="{{$tab}}">
                  <input type="hidden" name="name" value="{{.Name}}">
                  <button type="submit" class="btn-danger-sm" data-confirm="Remove {{.Name}}? Files will be deleted.">Remove</button>
                </form>
              {{else}}
                <form method="POST" action="/hub/install" style="display:inline">
                  <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                  <input type="hidden" name="kind" value="{{$tab}}">
                  <input type="hidden" name="tab"  value="{{$tab}}">
                  <input type="hidden" name="name" value="{{.Name}}">
                  <button type="submit" class="btn-safe-sm">Install</button>
                </form>
              {{end}}
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    {{else}}
    <div class="empty-state">
      <div class="empty-text">No {{.Tab}} found</div>
      <div class="empty-sub">Run "Update All" to refresh the hub index, then use "Install New..." to add items</div>
    </div>
    {{end}}
    {{end}}
  </div>
</div>
{{end}}

{{define "scripts"}}
<script>
var _hubTab = '{{.Tab}}';
var _tabSingular = {
  collections:   'collection',
  parsers:       'parser',
  scenarios:     'scenario',
  postoverflows: 'postoverflow'
};
var _hubItemPattern = /^[a-zA-Z0-9][a-zA-Z0-9_-]*\/[a-zA-Z0-9][a-zA-Z0-9._-]*$/;

function promptInstallNew() {
  var kind = _tabSingular[_hubTab] || _hubTab;
  appModal.prompt(
    'Install ' + kind + '\n\nEnter the hub item name (author/item-name):',
    'e.g. crowdsecurity/ssh-bf',
    _hubItemPattern,
    'Install'
  ).then(function (name) {
    if (!name) return;
    document.getElementById('install-new-name').value = name;
    document.getElementById('install-new-form').submit();
  });
}
</script>
{{end}}