{% extends "base.html" %}

{% block title %}Hello!{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
<div x-data>
  <nav class="navbar bg-base-100 shadow-sm overflow-hidden fixed top-0 left-0 z-20 flex justify-between">
    <a class="btn btn-ghost text-xl flex" href="/">
      <img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
      <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
    </a>
    <button class="btn btn-primary" @click="document.getElementById('create_modal').showModal()">Create</button>
  </nav>
  <div class="pt-20">
    <dialog id="create_modal" class="modal" x-cloak x-transition @close="document.getElementById('create_form').reset()">
      <div class="modal-box">
        <h3 class="text-lg font-bold pb-2">Create new RSS Feed subscription</h3>
        <form method="dialog">
          <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend"
              hx-indicator="#indicator"
              @htmx:after-on-load="document.getElementById('create_modal').close()">
          <fieldset class="fieldset gap-2">
            <label class="floating-label">
              <span>Name</span>
              <input type="text" class="input input-md w-full" placeholder="Name" name="name">
            </label>
            <label class="floating-label">
              <span>Feed URL</span>
              <input type="url" class="input input-md w-full" placeholder="Feed URL" name="feed_url">
            </label>
          </fieldset>
          <div class="modal-action">
            <button class="btn btn-primary" type="submit">
              Submit
              <img id="indicator" class="htmx-inline htmx-indicator" src="/assets/oval.svg"
                   style="height: 1rem; margin-left: 2px"
                   alt="...">
            </button>
          </div>
        </form>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button>close</button>
      </form>
    </dialog>
    <div class="overflow-x-auto mx-4 rounded-box border border-base-content/5 bg-base-100">
      <table class="table table-zebra">
        <thead>
        <tr>
          <th>Feed Name</th>
          <th>Feed URL</th>
          <th>Last Mail Sent</th>
          <th>Actions</th>
        </tr>
        </thead>
        <tbody id="feed_tbody">
        {{ feeds|safe }}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}