{% extends "base.html" %}

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

{% block head %}
<style>
    .navbar {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .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" x-show="isModalOpen" x-cloak></div>
    <dialog open x-show="isModalOpen" x-cloak x-transition>
        <header>
            <h2>Create new RSS Feed</h2>
        </header>
        <p>
            <b><strong>Gol D. Roger</strong></b>
            <br>
            <b>฿5,564,800,000</b>
        </p>
        <p>
            Kono sakuhin ha fiction dethunode jitsuzaisuru jinbutsu dantai sonota no soshiki to doitsu no meishou ga
            gekichu ni toujyou shitatoshitemo jitsuzai na monotoha issai mukankeideth.
        </p>
        <footer>
            <button x-on:click="isModalOpen = false">Close</button>
        </footer>
    </dialog>
</div>
<table style="text-align:center">
    <tr>
        <th>Feed Name</th>
        <th>Feed URL</th>
        <th>Last Mail Sent</th>
        <th>Actions</th>
    </tr>
    {% for feed in feeds %}
    {% include "feed.html" %}
    {% endfor %}
</table>
{% endblock %}