<div class="Toolbar">
    <div class="Toolbar-action">
        <button class="btn btn-default" ng-click="openDataPopup()" translate>Create a new variable</button>
        <button class="btn btn-default btn-data--help" ng-click="openHelp()" title="{{'Open help' | translate}}">
            <i class="fa fa-question-circle fa-lg"></i>
        </button>
    </div>
    <div>
        <search value="searchedData" placeholder="{{ 'Search' | translate }}"></search>
    </div>
</div>

<table class="Table VariablesTable">
    <thead>
    <tr>
        <th class="VariablesTable-name Table-sort">
            <a ng-click="sort('name')" translate>Name</a>
        </th>
        <th class="VariablesTable-value" translate>Value</th>
        <th class="VariablesTable-type Table-sort">
            <a ng-click="sort('type')" translate>Type</a>
        </th>
        <th class="VariablesTable-actions">
            <span class="badge">{{getVariables(searchedData).length}} of {{countOfVariables()}}</span>
        </th>
    </tr>
    </thead>
</table>
<div class="BottomPanel-scrollableView">
    <table class="Table VariablesTable">
        <tbody>
        <tr ng-repeat="variable in getVariables(searchedData) | orderBy:sortCriteria:isReversedSorting as variables track by variable.name"
            class="DataPanel-variable">
            <td class="VariablesTable-name">{{variable.name}}</td>
            <td class="VariablesTable-value">{{displayValue(variable)}}</td>
            <td class="VariablesTable-type" ng-class="{'VariablesTable-type--exposed': isExposed(variable)}">
                {{getType(variable)}}
            </td>
            <td class="VariablesTable-actions">
                <div class="btn-group link-group btn-group-sm pull-right">
                    <button class="btn update-data"
                            ng-click="openDataPopup(variable)"
                            title="{{ 'Edit variable' | translate }}">
                        <i class="fa fa-pencil"></i>
                    </button>
                    <button class="btn delete-data"
                            ng-click="delete(variable.name)"
                            title="{{ 'Delete variable' | translate }}">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
        <tr ng-if="variables.length===0">
            <td colspan="4" translate>No variable</td>
        </tr>
        </tbody>
    </table>
</div>
