{% extends "base.html" %}

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

{% block head %}
<style>
    .navbar {
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #161b22;
    }

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

{% block content %}
<nav class="navbar" style="z-index: 20">
    <div>
        <a href="/" style="display: flex">
            <img src="/assets/logo.svg" style="margin:8px; height: 32px" alt="RSS Notifier Logo"/>
            <h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
        </a>
    </div>
</nav>
<div style="height: 48px; margin-bottom: 8px"></div>
<div x-data="{'isModalOpen': false}">
    <div style="display:flex; justify-content:flex-end">
        <button x-on:click="isModalOpen = true">Create</button>
    </div>
    <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-swap="none">
            <label>
                Name
                <input type="text" name="name">
            </label>
            <label>
                Feed URL
                <input type="url" name="feed_url">
            </label>
        </form>
        <footer>
            <button form="create_form" type="reset" x-on:click="isModalOpen = false">Close</button>
            <button form="create_form" type="submit">Submit</button>
        </footer>
    </dialog>
    <table style="text-align:center">
        <thead>
        <tr>
            <th>Feed Name</th>
            <th>Feed URL</th>
            <th>Last Mail Sent</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody hx-get="/feed/" hx-trigger="newFeed from:body" x-on:htmx:after-settle="isModalOpen = false">
        {{ feeds|safe }}
        </tbody>
    </table>
</div>
{% endblock %}
