---
// Sidebar.astro

import { Code } from 'astro:components';

const code = `[
  {
    "type": "System or Task (ONLY one)",
    "title": "Example Prompt",
    "description": "This is an example prompt.",
    "tags": ["example", "test"],
    "notes": "The prompt description."
  }
]
`;
---

<aside class="w-64 border-r h-full p-4 text-gray-100 min-h-screen">
  <h2 class="text-lg font-semibold mb-4">Add a prompt</h2>

  <p class="text-sm">Use the form to add a new AI prompt to the catalog.</p>

  <p class="text-sm mt-2">All fields marked with <span class="text-red-600">*</span> are required.</p>

  <h2 class="text-lg font-semibold mt-6 mb-4">Import</h2>

  <p class="text-sm">To import prompts from a JSON file, upload a JSON file formatted as below, or download a sample <a class="underline" download href="/import-sample.json">here</a>.</p>

  <Code class="bg-gray-700 rounded text-sm p-2 mt-4" code={code} lang="json" wrap />

  <h2 class="text-lg font-semibold mt-6 mb-4">Export</h2>

  <p class="text-sm">To export prompts to a JSON file, select the prompts using the checkboxes, and click the button below.</p>

  <p class="text-sm mt-2">To export all prompts, leave all checkboxes unchecked.</p>

  <a href="/" id="home" class="block w-fit bg-green-600 text-white px-4 py-2 mt-4 rounded hover:bg-green-700 transition-colors duration-300">
    Go Back
  </a>
</aside>