<link href="css/ttyg/no-agents-view.css?v=3.4.0-RC3" rel="stylesheet"/>

<div class="no-agents-view-component" data-test="no-agents-view-component">
    <div class="content">
        <div class="alert alert-help mb-3"
             data-test="ttyg-info-message" ng-bind-html="'ttyg.agent.messages.help_1' | translate | trustAsHtml"></div>
        <div class="alert alert-help mb-3" data-test="ttyg-agent-message"
             ng-bind-html="'ttyg.agent.messages.help_2' | translate | trustAsHtml"></div>

        <div class="actions">
            <button class="btn btn-secondary btn-lg text-xs-left create-agent-btn"
                    gdb-tooltip="{{!canModifyAgent ? ('ttyg.agent.fat_btn.create_agent.tooltip_disabled' | translate) : ''}}"
                    ng-disabled="!canModifyAgent"
                    ng-click="onCreateAgent()" guide-selector="create-agent-btn">
                <i class="ri-robot-2-line ri-xl"></i>
                <span class="text">{{'ttyg.agent.fat_btn.create_agent.label' | translate}}</span>
            </button>
        </div>

        <div class="alert alert-warning mt-3" data-test="ttyg-api-key-message">
            <div ng-bind-html="'ttyg.agent.messages.help_config' | translate: {talkToGraphDocumentationLink: talkToGraphDocumentationLink} | trustAsHtml"></div>
        </div>
    </div>
</div>
