<?php
$this->css($this->assetModule('admin/admin.css'));
$this->jQuery('ui/jquery-ui.min.js');
$this->Backbone();

echo $this->form($form);
?>

<div class="form-group" id="widget-items">
    <div class="card mb-5 bg-light">
        <label class="p-3 col-form-label"><?php echo _a('Items'); ?></label>
    </div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-sm-6 col-md-3 widget-item-add">
                <div class="thumbnail widget-item-add-mark" title="<?php echo _a('Click to add new item.'); ?>">
                    <i class="fas fa-plus fa-3x text-muted"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="widget-item-template" type="text/template">
    <div class="widget-item">
        <div class="card bg-light p-2">
            <button type="button" class="close" title="<?php echo _a('Click to remove'); ?>">&times;</button>
            <p>
                <label><?php echo _a('Caption'); ?></label>
                <input type="text" value="<%= caption %>" name="<%= prefix %>caption" class="form-control">
            </p>
            <p>
                <label><?php echo _a('Icon'); ?></label>
                <input type="text" value="<%= icon %>" name="<%= prefix %>icon" class="form-control">
            </p>
            <p>
                <label><?php echo _a('Link'); ?></label>
                <input type="text" value="<%= link %>" name="<%= prefix %>link" class="form-control">
            </p>
            <p>
                <label><?php echo _a('Summary'); ?></label>
                <textarea name="<%= prefix %>summary" class="form-control" rows="5"><%= summary %></textarea>
            </p>
        </div>
    </div>
</script>

<script src="<?php echo $this->assetModule('admin/widget-list.js'); ?>"></script>
<script>
    widgetAction({
        prefix: "block-",
        items: <?php echo $content ?: json_encode([]); ?>
    });
</script>