{{ template "header" . }}


<div>
  <div id="manage-bookmark" class="p-4">
    <div class="grid grid-cols-6">
      <label class="my-4 col-start-1 col-span-2 text-l font-light text-sky-400">
        <b>Create Bookmark</b>
      </label>
    </div>

    <form
      action="{{ .AppPath }}/create"
      method="post"
      class="grid grid-cols-12 gap-2">
      <input
        class="pt-1 col-start-1 col-span-4 input input-primary "
        placeholder="Link"
        type="url"
        name="url"
        size="40" />

      <select
        id="tags-select"
        name="tags"
        class="col-start-5 col-span-6 select select-multiple"
        style="border-color: #0284c7; border-width: 1px;"
        multiple
        placeholder="Enter tags...">
        {{ range $i, $tag := .Data.Tags }}
          <option value="{{ $tag }}">{{ $tag }}</option>
        {{ end }}
      </select>

      <input
        type="submit"
        value="Create"
        class="btn btn-primary rounded-md  col-start-11 col-span-2 font-bold" />
    </form>
  </div>

  <div class="py-6 pb-2 pl-4 grid grid-cols-6">
    <label class="col-start-1 col-span-2 text-l font-light text-sky-400">
      <b>Recent Bookmarks</b>
    </label>
  </div>

  <div>
    <table
      class="table text-md font-mono table-fixed w-full"
      hx-target="closest tr"
      hx-swap="outerHTML">
      <thead>
        <tr>
          <th class="w-2/3 max-w-xs break-words">Link</th>
          <th class="w-2/3 max-w-xs">Tags</th>
          <th class="w-1/6">&nbsp;&nbsp;</th>
          <th class="w-1/6">&nbsp;&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        {{ range .Data.Bookmarks }}
          {{ $row := dict "Data" . "AppPath" $.AppPath }}
          {{ template "row" $row }}
        {{ end }}
      </tbody>
    </table>
  </div>
</div>

{{ template "footer" . }}

{{ define "edit_bookmark" }}
  <tr>
    <td>{{ .Data.url }}</td>
    <td>
      <select
        name="tags"
        class="tags-select-edit col-start-5 col-span-6 select select-multiple"
        style="border-color: #0284c7; border-width: 1px;"
        multiple
        placeholder="Update tags...">
        {{ $selected := "" }}
        {{ range $i, $tag := .Data.tags }}
          <option
            value="{{- $tag.name -}}"
            {{ if $tag.value }}{{ $tag.value }}{{ end }}>
            {{ $tag.name }}
          </option>
        {{ end }}
      </select>
    </td>
    <td>
      <button
        class="btn btn-sm btn-primary"
        hx-post="{{ .AppPath }}/edit?url={{ .Data.url }}"
        hx-include="closest tr">
        Save
      </button>

      <button
        class="btn btn-sm btn-secondary"
        hx-get="{{ .AppPath }}/bookmark?url={{ .Data.url }}">
        Cancel
      </button>
    </td>
  </tr>
{{ end }}

{{ define "row" }}
  <tr>
    <td class="max-w-xs break-words">
      <a class="link" href="{{ .Data.url }}" target="_blank">{{ .Data.url }}</a>
    </td>
    <td>
      {{ range .Data.tags }}
        <a href="{{ $.AppPath }}/tags?tag={{ . }}"
          ><div class="badge badge-secondary">{{ . }}</div></a
        >
      {{ end }}
    </td>
    <td>
      <button title="edit">
        <img
          class="max-w-none"
          src="{{ static "icons/edit.svg" }}"
          alt="edit"
          hx-get="{{ .AppPath }}/edit?url={{ .Data.url }}" />
      </button>
    </td>
    <td>
      <button title="delete">
        <img
          class="max-w-none"
          src="{{ static "icons/delete.svg" }}"
          alt="delete"
          hx-delete="{{ .AppPath }}/?url={{ .Data.url }}"
          hx-swap="outerHTML swap:1s" />
      </button>
    </td>
  </tr>
{{ end }}