-- packages/view.wo — the VIEW for /packages and /packages/:name.
--
-- Three components: a card for the index, the index itself (holding its
-- cards as CHILDREN through the structural interface), and the detail
-- page. None of them knows where the catalogue came from.
use html

pub class PackageCard {
  name:    Text
  summary: Text

  fn render() -> Text {
    return `
      <div class="bg-white rounded-lg border shadow-sm p-6">
        <h3 class="text-lg font-bold mb-2"><a href="/packages/{{ self.name }}">{{ self.name }}</a></h3>
        <p class="leading-relaxed text-gray-700">{{ self.summary }}</p>
      </div>`;
  }
}

pub class PackagesPage {
  cards: multi Component

  fn render() -> Text {
    return `
      <h1 class="text-3xl font-bold mb-4">Packages</h1>
      <p class="leading-relaxed mb-6">A package is a git repository with a
      <code>wo.toml</code> that says <code>kind = "library"</code>. There is no
      registry and no publish step: you depend on a URL and a revision, and
      <code>wo.lock</code> pins exactly what you built against. These are the
      libraries this site itself is built on.</p>
      <div class="grid grid-cols-2 gap-6 mb-8">${render_all(self.cards)}</div>`;
  }
}

pub class PackagePage {
  name:    Text
  summary: Text
  git:     Text
  rev:     Text
  what:    Text
  usage:   Text

  fn render() -> Text {
    let dep = code_block("[deps]\n" .. self.name .. " = { git = \"" .. self.git .. "\", rev = \"" .. self.rev .. "\" }");
    let head = `
      <h1 class="text-3xl font-bold mb-2">{{ self.name }}</h1>
      <p class="leading-relaxed text-gray-700 mb-6">{{ self.summary }}</p>
      <h2 class="text-2xl font-bold mb-2">Install</h2>
      <p class="leading-relaxed mb-4">Add it to your <code>wo.toml</code>. The
      KEY is the module name — that is what <code>use</code> imports.</p>`;
    let what = `
      <h2 class="text-2xl font-bold mb-2 mt-8">What you get</h2>
      ${self.what}`;
    let usage = `
      <h2 class="text-2xl font-bold mb-2 mt-8">Usage</h2>
      ${self.usage}`;
    let back = el("p", "mt-8", link("/packages", "", "← all packages"));
    return head .. dep .. what .. usage .. back;
  }
}