<table class="table">
    <thead>
    <tr>
        <td></td>
        <td class="text-right col-md-3">required</td>
        <td class="text-right col-md-3">found</td>
        <td class="text-right col-md-1"></td>
    </tr>
    </thead>
    <tbody>
    <repeat group="{{ @requirementsData }}" key="{{ @dbKey }}" value="{{ @requirement }}">

        {* if for optional divider *}
        <check if="{{ is_numeric( @dbKey ) }}">
            <true>
                    </tbody>
                </table>

                <div class="panel-footer text-left">
                    <h3 class="panel-title">{{@requirement.label}}</h3>
                </div>

                <table class="table">
                    <tbody>
            </true>
            <false>
                <tr>
                    <td>
                        {{@requirement.label | raw }}
                        <check if="{{ @requirement.tooltip }}">
                            <i class="fas fa-fw fa-sm fa-question-circle pf-help-light" title="{{ @requirement.tooltip }}"></i>
                        </check>
                    </td>
                    <check if="{{ isset(@requirement.required) }}">
                        <td class="text-right col-md-3 text-right">
                            <kbd>{{@requirement.required}}</kbd>
                        </td>
                    </check>

                    <td
                            class="{{ isset(@requirement.required) ? 'text-right col-xs-2 col-md-3 text-right' : 'text-right col-xs-4 col-md-6 text-right' }}"
                            colspan="{{ isset(@requirement.required) ? '1' : '2' }}"
                    >
                        <check if="{{ @requirement.check }}">
                            <true>
                                <kbd class="txt-color txt-color-success">{{@requirement.version }}</kbd>
                            </true>
                            <false>
                                <kbd class="txt-color txt-color-warning">{{@requirement.version }}</kbd>
                                {* Check failed *}
                                {{ @tplCounter() }}
                            </false>
                        </check>
                    </td>

                    <check if="{{ @requirement.task }}">
                        <true>
                            <td class="text-right col-xs-{{ count(@requirement.task) * 2 }} col-md-{{ count(@requirement.task) * 2 }} no-padding text-right">
                                <div class="btn-group btn-group-justified">
                                    <repeat group="{{ @requirement.task }}" key="{{ @taskKey }}" value="{{ @taskData }}">
                                        <a href="?{{ @taskData.action }}" class="btn btn-default {{ @taskData.btn }}" role="button">
                                            <i class="fas fa-fw {{ @taskData.icon }}"></i>&nbsp;{{ @taskData.label }}
                                        </a>
                                    </repeat>
                                </div>
                            </td>
                        </true>
                        <false>
                            {* no task data *}
                            <td class="text-right col-sm-1 col-md-1">
                                <check if="{{ @requirement.check }}">
                                    <true>
                                        {* Check ok *}
                                        <i class="fas fa-fw fa-check txt-color txt-color-success"></i>
                                    </true>
                                    <false>
                                        {* Check failed *}
                                        <i class="fas fa-fw fa-exclamation-triangle txt-color txt-color-warning"></i>
                                    </false>
                                </check>
                            </td>
                        </false>
                    </check>
                </tr>
            </false>
        </check>
    </repeat>
    </tbody>
</table>