{% extends "base.html" %}

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

{% block head %}
<style>
    .overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #161b22;
        opacity: 0.75;
    }

    th {
        white-space: nowrap;
    }

    td {
        white-space: nowrap;
    }
</style>
{% endblock %}

{% block content %}
<div x-data="{'isModalOpen': false}">
<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" @click="isModalOpen = true">Create</button>
</nav>
<div class="pt-16">
  <!-- TODO: Switch overlay and dialog to DaisyUI -->
  <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
  <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
    <header>
      <h2>Create new RSS Feed subscription</h2>
    </header>
    <form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend"
          hx-indicator="#indicator"
          @htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
      <label>
        Name
        <input type="text" name="name">
      </label>
      <label>
        Feed URL
        <input type="url" name="feed_url">
      </label>
    </form>
    <footer>
      <button class="btn" form="create_form" type="reset" @click="isModalOpen = false">Close</button>
      <button class="btn" form="create_form" type="submit">
        Submit
        <img id="indicator" class="htmx-indicator" src="/assets/oval.svg"
             style="height: 1rem; margin-left: 2px"
             alt="...">
      </button>
    </footer>
  </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 %}