<?php
$escape = $this->plugin('escapeHtml');
?>
<div id="property-selector" class='selector sidebar <?php echo $state; ?>'>
    <a href="#" class="mobile-only sidebar-close o-icon-close"><span class="screen-reader-text"><?php echo $this->translate('Close Me'); ?></span></a>
    <?php if ($propertySelectorText) :?>
    <h3><?php echo $escape($this->translate($propertySelectorText)); ?></h3>
    <?php else: ?>
    <h3><?php echo $this->translate('Click on a property to add it to the edit panel.'); ?></h3>
    <?php endif; ?>
    <input type="text" class="selector-filter" placeholder="<?php echo $this->translate('Filter properties'); ?>">
    <ul class="selectable-list">
        <?php foreach ($vocabularies as $vocabulary): ?>
        <?php
        $properties = $vocabulary->properties();
        if (!$properties) {
            // Do not render vocabularies without properties.
            continue;
        }
        ?>
        <li class='selector-parent'
            data-vocabulary-id="<?php echo $escape($vocabulary->id()); ?>">
            <span><?php echo $escape($this->translate($vocabulary->label())); ?></span> (<span class="selector-child-count"><?php echo count($vocabulary->properties()); ?></span>)
            <ul>
                <?php foreach ($properties as $property): ?>
                <li class='selector-child'
                    data-child-search="<?php echo $escape($this->translate($property->label())); ?>"
                    data-property-id="<?php echo $escape($property->id()); ?>"
                    data-property-term="<?php echo $escape($property->term()); ?>">
                    <div class="description">
                        <p class="o-icon-info"><span class="screen-reader-text"><?php echo $this->translate('More Info'); ?></span></p>
                        <p class="field-comment"><?php echo $escape($this->translate($property->comment())); ?></p>
                    </div>
                    <span class="selectable"><?php echo $escape($this->translate($property->label())); ?></span>
                </li>
                <?php endforeach; ?>
            </ul>
        </li>
        <?php endforeach; ?>
    </ul>
</div>
