{{> header}}
<div class="syn-mock-property" style="--property-key-width: {{propertyKeyColumnWidth}}">
    <div class="syn-mock-property-head">
        <strong>속성</strong>
        <strong>값</strong>
    </div>
    {{#propertyGroups}}
    <div class="syn-mock-property-group">
        {{#propertyCollapsible}}<i class="ti ti-chevron-down" aria-hidden="true"></i>{{/propertyCollapsible}}
        <strong>{{name}}</strong>
        <small>{{count}}개</small>
    </div>
    {{#rows}}
    <div class="syn-mock-property-row {{#colspan2}}is-wide{{/colspan2}}">
        {{^colspan2}}
        <span class="syn-mock-property-name" title="{{name}}">
            {{name}}
            {{#hasHelp}}<i class="ti ti-help-circle" aria-hidden="true"></i>{{/hasHelp}}
        </span>
        {{/colspan2}}
        <span class="syn-mock-property-value {{#readonly}}is-readonly{{/readonly}} {{#disabled}}is-disabled{{/disabled}}">
            {{#isBoolean}}<i class="ti {{booleanIcon}} syn-mock-property-check" aria-hidden="true"></i><span>{{displayValue}}</span>{{/isBoolean}}
            {{#isColor}}<i class="syn-mock-property-swatch" style="--property-color: {{colorValue}}" aria-hidden="true"></i><code>{{displayValue}}</code>{{/isColor}}
            {{#isOptions}}<span>{{displayValue}}</span><i class="ti ti-chevron-down" aria-hidden="true"></i>{{/isOptions}}
            {{#isJson}}<i class="ti ti-braces" aria-hidden="true"></i><code>{{displayValue}}</code>{{/isJson}}
            {{#isFunction}}<i class="ti ti-function" aria-hidden="true"></i><code>{{displayValue}}</code>{{/isFunction}}
            {{#isText}}<span>{{displayValue}}</span>{{/isText}}
        </span>
    </div>
    {{/rows}}
    {{/propertyGroups}}
    {{#propertyEmpty}}
    <div class="syn-mock-property-empty">
        <i class="ti ti-table-off" aria-hidden="true"></i>
        <span>표시할 속성이 없습니다.</span>
    </div>
    {{/propertyEmpty}}
</div>