{{> header}}
<div class="syn-mock-auigrid">
    {{#auiShowGroupingPanel}}
    <div class="syn-mock-auigrid-grouping">
        <i class="ti ti-box-align-top" aria-hidden="true"></i>
        <span>{{auiGroupingMessage}}</span>
    </div>
    {{/auiShowGroupingPanel}}
    <div class="syn-mock-auigrid-summary">
        <strong>{{caption}}</strong>
        <span class="syn-mock-auigrid-count">{{auiRowCount}}건</span>
        {{#auiEditable}}<span class="syn-mock-chip">편집 가능</span>{{/auiEditable}}
        {{#auiShowInlineFilter}}<span class="syn-mock-chip">인라인 필터</span>{{/auiShowInlineFilter}}
    </div>
    <div class="syn-mock-auigrid-table">
        {{#auiFooterTop}}
        <div class="syn-mock-auigrid-row syn-mock-auigrid-footer">
            {{#auiShowRowCheckColumn}}<span class="syn-mock-auigrid-check"></span>{{/auiShowRowCheckColumn}}
            {{#auiShowRowNumColumn}}<span class="syn-mock-auigrid-rownum">Σ</span>{{/auiShowRowNumColumn}}
            {{#auiShowStateColumn}}<span class="syn-mock-auigrid-state"></span>{{/auiShowStateColumn}}
            {{#columns}}<span class="syn-mock-auigrid-cell {{alignClass}}">{{footerValue}}</span>{{/columns}}
        </div>
        {{/auiFooterTop}}
        <div class="syn-mock-auigrid-row syn-mock-auigrid-header">
            {{#auiShowRowCheckColumn}}<span class="syn-mock-auigrid-check"><i class="ti {{auiCheckIcon}}" aria-hidden="true"></i></span>{{/auiShowRowCheckColumn}}
            {{#auiShowRowNumColumn}}<span class="syn-mock-auigrid-rownum">No.</span>{{/auiShowRowNumColumn}}
            {{#auiShowStateColumn}}<span class="syn-mock-auigrid-state">상태</span>{{/auiShowStateColumn}}
            {{#columns}}
            <span class="syn-mock-auigrid-cell {{alignClass}}" title="{{dataField}} · {{columnType}}">
                <span>{{name}}</span>
                {{#sortable}}<i class="ti ti-selector" aria-hidden="true"></i>{{/sortable}}
            </span>
            {{/columns}}
        </div>
        {{#auiShowInlineFilter}}
        <div class="syn-mock-auigrid-row syn-mock-auigrid-filter">
            {{#auiShowRowCheckColumn}}<span class="syn-mock-auigrid-check"></span>{{/auiShowRowCheckColumn}}
            {{#auiShowRowNumColumn}}<span class="syn-mock-auigrid-rownum"></span>{{/auiShowRowNumColumn}}
            {{#auiShowStateColumn}}<span class="syn-mock-auigrid-state"></span>{{/auiShowStateColumn}}
            {{#columns}}<span class="syn-mock-auigrid-cell"><span class="syn-mock-auigrid-filter-input"><i class="ti ti-filter" aria-hidden="true"></i></span></span>{{/columns}}
        </div>
        {{/auiShowInlineFilter}}
        {{#auiRows}}
        <div class="syn-mock-auigrid-row {{rowClass}}">
            {{#auiShowRowCheckColumn}}<span class="syn-mock-auigrid-check"><i class="ti {{auiCheckIcon}}" aria-hidden="true"></i></span>{{/auiShowRowCheckColumn}}
            {{#auiShowRowNumColumn}}<span class="syn-mock-auigrid-rownum">{{rowNumber}}</span>{{/auiShowRowNumColumn}}
            {{#auiShowStateColumn}}<span class="syn-mock-auigrid-state"><span class="syn-mock-auigrid-flag">{{flag}}</span></span>{{/auiShowStateColumn}}
            {{#columns}}<span class="syn-mock-auigrid-cell {{alignClass}} {{#readOnly}}is-readonly{{/readOnly}}">{{sampleValue}}</span>{{/columns}}
        </div>
        {{/auiRows}}
        {{#auiFooterBottom}}
        <div class="syn-mock-auigrid-row syn-mock-auigrid-footer">
            {{#auiShowRowCheckColumn}}<span class="syn-mock-auigrid-check"></span>{{/auiShowRowCheckColumn}}
            {{#auiShowRowNumColumn}}<span class="syn-mock-auigrid-rownum">Σ</span>{{/auiShowRowNumColumn}}
            {{#auiShowStateColumn}}<span class="syn-mock-auigrid-state"></span>{{/auiShowStateColumn}}
            {{#columns}}<span class="syn-mock-auigrid-cell {{alignClass}}">{{footerValue}}</span>{{/columns}}
        </div>
        {{/auiFooterBottom}}
    </div>
</div>