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

include $this->templateComponent('form');
?>

<div id="widget-items">
    <div class="form-group">
        <label class="col-sm-3 col-lg-2 col-form-label"><?php echo _a('Items'); ?></label>
        <div class="col-md-10">
            <div class="row">
                <div class="col-sm-6 col-md-3 widget-item-add">
                    <div class="thumbnail widget-item-add-mark" style="cursor: help;"
                         title="<?php echo _a('Select from below available module blocks to add.'); ?>"
                    >
                        <i class="fas fa-plus fa-3x text-muted"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 col-lg-2 col-form-label"><?php echo _a('Module blocks'); ?></label>
        <div class="col-sm-6 widget-tab-module" style="max-height: 300px; overflow-Y: scroll;">
            <ul class="list-unstyled">
                <?php foreach ($modules as $module) { ?>
                    <li class="widget-tab-module-item" data-name="<?php echo $module['name']; ?>">
                        <div class="widget-module-block" style="cursor:pointer;">
                            <i class="fas fa-caret-right"></i>
                            <i class="fas fa-caret-down"></i>
                            <?php echo $module['title']; ?>
                        </div>
                        <ul>
                        </ul>
                    </li>
                <?php } ?>
            </ul>
        </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>
                <input type="text" value="<%= caption %>" name="<%= prefix %>caption" class="form-control">
            </p>
            <p>
                <input type="text" value="<%= link %>" name="<%= prefix %>link" placeholder="http://"
                       class="form-control">
            </p>
            <input type="hidden" value="<%= id %>" name="<%= prefix %>id">
        </div>
    </div>
</script>


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