package meme

templ (p *MemePlugin) index(all webResps) {
    <h2>New Meme</h2>
    <form>
        <input type="text" name="name" placeholder="Name..." />
        <input type="text" name="url" placeholder="URL..." />
        <textarea name="config">
        </textarea>
        <button class="button"
            hx-post="/meme/add"
            hx-target="#newMemes"
        >Save</button>
    </form>

    <h2>Current Memes</h2>

    <div id="newMemes">
    </div>

   <div class="row">
    for _, meme := range all {
       <div class="col-xs">
            <div class="box">@p.Show(meme)</div>
        </div>
    }
    </div>
}

templ (p *MemePlugin) Show(meme webResp) {
    <article id={ meme.Name } style="width: 300px">
        <header>
        <img
            class="thumbnail"
            style="max-height: 300px; max-width: 300px;"
            alt={ meme.Name }
            src={ meme.URL } />
            <p>{ meme.Name }</p>
        </header>
        <pre style="max-width: 300px; overflow: auto">
            { meme.Config }
        </pre>
        <footer>
        <button class="button"
            hx-get={ "/meme/edit/"+meme.Name }
            hx-target={ "#"+meme.Name }
            hx-swap="outerHTML"
        >Edit</button>
        </footer>
    </article>
}

templ (p *MemePlugin) Edit(meme webResp) {
    <form style="width: 300px">
        <article id={ meme.Name }>
        <header>
        <img
            class="thumbnail"
            style="max-height: 250px"
            alt={ meme.Name }
            src={ meme.URL } />
       </header>
        <textarea name="config" rows="10">
            { meme.Config }
        </textarea>
        <input type="text" name="url" value={ meme.URL } />
        <footer>
        <button class="button"
            hx-put={ "/meme/save/"+meme.Name }
            hx-target={ "#"+meme.Name }
            hx-swap="outerHTML"
        >Save</button>
        <button class="button alert"
            hx-delete={ "/meme/rm/"+meme.Name }
            hx-target={ "#"+meme.Name }
            hx-swap="outerHTML"
        >Delete</button>
        </footer>
        </article>
    </form>
}