<?php
$this->css($this->assetModule('admin/admin.css'));
$this->jQuery([
    'ui/jquery-ui.min.js',
    'extension/fileupload-min.js',
]);

$script
    = <<<'EOT'
window.addEventListener('DOMContentLoaded', function() {
    $('.image-popup').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        image: {
            verticalFit: false
        }
    });
});
EOT;
$this->jQuery(['extension/jquery.magnific-popup.min.js' => ['defer' => 'defer']]);
$this->jQuery('extension/magnific-popup.min.css');
$this->footScript()->appendScript($script);

$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 upload image then add item contents.'); ?>">
                    <i class="fas fa-plus fa-3x text-muted widget-file-button">
                        <input type="file" name="image" multiple style="width: 100%;" class="hide">
                    </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>
            <a href="<%= image %>" class="image-popup img-responsive">
                <img src="<%= image %>">
            </a>
            <p>
                <label><?php echo _a('Caption'); ?></label>
                <input type="text" value="<%= caption %>" name="<%= prefix %>caption" 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>
            <p>
                <label><?php echo _a('Button'); ?></label>
                <input type="text" value="<%= button %>" name="<%= prefix %>button" class="form-control">
            </p>
        </div>
    </div>
</script>
<script src="<?php echo $this->assetModule('admin/widget-media.js'); ?>"></script>
<script>
    widgetAction({
        prefix: "block-",
        uploadUrl: '<?php echo $this->url('', ['action' => 'upload']); ?>',
        items: <?php echo $content ?: json_encode([]); ?>
    });
</script>