<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

<form action="<?= $this->action ?>" method="post" id="wishlists<?= $this->id ?>">
    <input type="hidden" name="FORM_SUBMIT" value="wishlists<?= $this->id ?>">
    <input type="hidden" name="REQUEST_TOKEN" value="<?= REQUEST_TOKEN ?>">

<table class="table table-bordered">
  <thead class="bg-gryL">
  <tr><td>{{iflng::sl}}Ime{{iflng}}{{ifnlng::sl}}Name{{ifnlng}}</td><td>{{iflng::sl}}Možnosti{{iflng}}{{ifnlng::sl}}Edit{{ifnlng}}</td></tr>
  </thead>
    <?php foreach ($this->items as $wishlist): ?>
    <tr>
        <td class="show" style="display:none"><?= $wishlist['name'] ?></td>
        <td class="show"><a href="<?= $wishlist['href'] ?>"><?= $GLOBALS['TL_LANG']['MSC']['buttonLabel']['wishlist_details'] ?></a></td>
        <td class="edit"><input class="form-control" type="text" name="name[<?=$wishlist['id'] ?>]" value="<?= $wishlist['name'] ?>"></td>
        <td class="edit"><button class="btn btn-dark" type="submit" name="delete" value="<?= $wishlist['id'] ?>"><?= $GLOBALS['TL_LANG']['MSC']['buttonLabel']['delete_wishlist'] ?></button></td>
    </tr>
    <?php endforeach; ?>
</table>

<div class="input-group" role="group">
  <input type="text" name="new" class="edit form-control" placeholder="<?= $GLOBALS['TL_LANG']['MSC']['defaultWishlistLabel'] ?>">
  <div class="input-group-append">
    <button type="button" class="show btn btn-secondary" id="wishlists<?= $this->id ?>_edit" name="edit" style="display:none"><?= $GLOBALS['TL_LANG']['MSC']['buttonLabel']['edit_wishlist'] ?></button>
    <button type="submit" class="edit btn btn-success" name="save"><?= $GLOBALS['TL_LANG']['MSC']['save'] ?></button>
</div>

</form>

<script>
    (function() {
        var form = document.getElementById('wishlists<?= $this->id ?>');
        var editButton = document.getElementById('wishlists<?= $this->id ?>_edit');

        var showElements = form.getElementsByClassName('show');
        var editElements = form.getElementsByClassName('edit');

        setDisplay(showElements, 'table-cell');
        setDisplay(editElements, 'none');

        editButton.addEventListener('click', function () {
            setDisplay(showElements, 'none');
            setDisplay(editElements, 'table-cell');
        });

        function setDisplay(elements, display) {
            for(var i=0; i<elements.length; i++) {
                elements[i].style.display = display;
            }
        }
    })();
</script>

<?php $this->endblock(); ?>
