<link href="css/ttyg/agent-list.css?v=3.4.0-RC3" rel="stylesheet"/>

<div class="agent-list-component">
    <div class="agents-filter-dropdown btn-group" uib-dropdown>
        <button type="button" uib-dropdown-toggle class="btn btn-secondary dropdown-toggle">
            <i class="icon-repo-graphdb mr-1"></i>
            <span class="selected-filter">{{selectedAgentsFilter.label}}</span>
            <i class="ri-filter-line" gdb-tooltip="{{'ttyg.agent.btn.filter.tooltip' | translate}}"></i>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li ng-repeat="filterModel in agentListFilterModel">
                <button type="button" class="dropdown-item" ng-click="onAgentsFilterChange(filterModel)"
                        data-value="{{filterModel.label}}">
                    {{filterModel.label}}
                </button>
            </li>
        </ul>
    </div>

    <div class="agent-list">
        <div ng-if="!agentList.agents.length" class="alert alert-warning">
            {{'ttyg.agent.messages.no_agents' | translate}}
        </div>

        <div ng-repeat="agent in agentList.filterableAgents">
            <div ng-if="!deletingAgent || deletingAgent.agentId !== agent.id" class="agent-item"
                 ng-class="{'selected': agent.id === selectedAgent.id}">
                <div class="agent-info"
                     ng-attr-gdb-tooltip="{{!agent.isCompatible ? ('ttyg.agent.incompatible_agent' | translate) : undefined}}">
                    <div class="agent-name" ng-class="{'incompatible-agent': !agent.isCompatible}">
                        <i ng-if="!agent.isCompatible"
                           class="ri-alert-line text-warning">
                        </i>
                        {{agent.name}}
                    </div>


                <div class="btn-group">
                    <button class="btn btn-link secondary btn-sm open-agent-actions-btn"
                            data-toggle="dropdown" aria-expanded="false"
                            ng-if="true"
                            ng-click="openAgentActionMenu()"
                            ng-disabled="false">
                        <i class="ri-more-line"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right agent-actions-menu">
                        <button ng-if="agent.isCompatible"
                                class="dropdown-item edit-agent-btn"
                                type="button"
                                ng-click="onEditAgent(agent)">
                            <i class="ri-settings-3-line"></i>
                            <span>{{'ttyg.agent.btn.edit_agent.label' | translate}}</span>
                        </button>
                        <button ng-if="agent.isCompatible"
                                class="dropdown-item ext-integration-agent-btn"
                                type="button"
                                ng-click="onExternalIntegration(agent)">
                            <i class="ri-plug-line"></i>
                            <span>{{'ttyg.agent.btn.external_integration' | translate}}</span>
                        </button>
                        <button ng-if="agent.isCompatible"
                                class="dropdown-item clone-agent-btn"
                                type="button"
                                ng-click="onCloneAgent(agent)">
                            <i class="ri-file-copy-line"></i>
                            <span>{{'ttyg.agent.btn.clone_agent.label' | translate}}</span>
                        </button>
                        <div ng-if="agent.isCompatible"
                             class="dropdown-divider"></div>
                        <button class="dropdown-item delete-agent-btn" type="button" ng-click="onDeleteAgent(agent)">
                            <i class="ri-delete-bin-6-line"></i>
                            <span>{{'ttyg.agent.btn.delete_agent.label' | translate}}</span>
                        </button>
                    </div>
                </div>
                </div>
                <div class="repository-model-group">
                    <div class="related-repository">
                        <i ng-if="!agent.isRepositoryDeleted" class="icon-repo-graphdb"></i>
                        <i ng-if="agent.isRepositoryDeleted"
                           class="ri-alert-line text-warning agent-with-deleted-repository"
                           gdb-tooltip="{{'ttyg.agent.deleted_repository' | translate}}">
                        </i>
                        {{agent.repositoryId}}
                    </div>
                    <div class="model-name">{{agent.model}}</div>
                </div>
            </div>

            <div class="deleting-agent-loader" ng-if="deletingAgent.agentId === agent.id && deletingAgent.inProgress"
                 onto-loader auto-font-size="false" message-text="{{'ttyg.agent.deleting_agent' | translate}}"
                 size="25"></div>
        </div>
    </div>
</div>
