<div class="large-8 medium-8 cell" id="add-url-form" >
    <div>
        <h5 style="display:inline-block;">Add bulk URLs</h5>
        <p  style="display:inline-block;">[<a hx-get="/single_add" hx-swap="outerHTML" hx-target="#add-url-form" href="#">single add</a>]</h5>
    </div> 
    <form onsubmit="return false">
        <div class="grid-x grid-padding-x">
            <div class="large-12 cell">
                <label>Paste URL's, one per line</label>
                <textarea type="text" name="urls"  rows="10"></textarea>
            </div>
        </div>
        <button 
            class="button" 
            hx-post="/add_bulk"
            hx-indicator="#htmx-indicator-bulk"
            hx-target="#add-url-form">
            add
        </button>
        <span id="htmx-indicator-bulk" class="htmx-indicator">
            <img src="/assets/image/beating.gif" /> adding...
        </span>
    
    </form>
    {{ if .errors }}
        <ul>
        {{ range .errors }}
        <li class="error">{{ . }}</li>
        {{ end }}
        </ul>
    {{ else }}
        {{ if .added }}
        Added {{ .added }} urls
        {{ end }}
    {{ end }}
</div>