<div id="modal" x-data>
    <div class="overlay" style="z-index: 30"></div>
    <dialog open style="z-index: 31">
        <header>
            <h2>Modify RSS Feed subscription</h2>
        </header>
        <form id="modify_form" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
              hx-indicator="#mod_indicator"
              @htmx:after-on-load="document.getElementById('modal').remove()">
            <label>
                Name
                <input type="text" name="name" value="{{feed.name}}">
            </label>
            <label>
                Feed URL
                <input type="url" name="feed_url" value="{{feed.feed_url}}">
            </label>
        </form>
        <footer>
            <button class="btn" form="modify_form" type="reset" @click="document.getElementById('modal').remove()">Close
            </button>
            <button class="btn" form="modify_form" type="submit">
                Submit
                <img id="mod_indicator" class="htmx-indicator" src="/assets/oval.svg"
                     style="height: 1rem; margin-left: 2px" alt="...">
            </button>
        </footer>
    </dialog>
</div>