<div id="bot-settings" class="settings-section" data-name="your-bots">
    <div class="bot-settings-form">
        {{#unless page_params.is_guest}}
        <div class="tip">
            {{#tr}}
                Looking for our <z-integrations>integrations</z-integrations> or <z-api>API</z-api> documentation?
                {{#*inline "z-integrations"}}<a href="/integrations" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
                {{#*inline "z-api"}}<a href="/api" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
            {{/tr}}
        </div>
        <div class="tip bot-settings-tip"></div>

        <div>
            <span>{{t 'Download config of all active outgoing webhook bots in Zulip Botserver format.' }}</span>
            <a type="submit" download="{{botserverrc}}" id= "download_botserverrc" class="btn" title="{{t 'Download botserverrc' }}">
                <i class="fa fa-download sea-green" aria-hidden="true"></i>
            </a>
        </div>
        {{/unless}}

        <ul class="nav nav-tabs nav-justified" id="bots_lists_navbar">
            <li class="active active-bots-tab"><a>{{t "Active bots" }}</a></li>
            <li class="inactive-bots-tab"><a>{{t "Inactive bots" }}</a></li>
            <li class="add-a-new-bot-tab {{#unless can_create_new_bots}}hide{{/unless}}"><a>{{t "Add a new bot" }}</a></li>
        </ul>

        <ol class="bots_list required-text" id="active_bots_list" data-empty="{{t 'You have no active bots.' }}">
        </ol>

        <ol class="bots_list required-text" id="inactive_bots_list" data-empty="{{t 'You have no inactive bots.' }}">
        </ol>

        <div id="bot_table_error" class="alert alert-error hide"></div>

        <div id="add-a-new-bot-form">
            <form id="create_bot_form"
              class="form-horizontal no-padding {{#unless can_create_new_bots}}hide{{/unless}}">
                <div class="new-bot-form">
                    <div class="input-group">
                        <label for="bot_type">
                            {{t "Bot type" }}
                            <i class="fa fa-question-circle settings-info-icon bot_type_tooltip tippy-zulip-tooltip" aria-hidden="true" data-tippy-content='{{t "Incoming webhooks can only send messages." }}'></i>
                        </label>
                        <select name="bot_type" id="create_bot_type">
                            {{#each page_params.bot_types}}
                                {{#if this.allowed}}
                                <option value="{{this.type_id}}">{{this.name}}</option>
                                {{/if}}
                            {{/each}}
                        </select>
                    </div>
                    <div class="input-group" id="service_name_list">
                        <label for="select_service_name">{{t "Bot"}}</label>
                        <select name="service_name" id="select_service_name">
                            {{#each page_params.realm_embedded_bots}}
                                <option value="{{this.name}}">{{this.name}}</option>
                            {{/each}}
                        </select>
                    </div>
                    <div class="input-group">
                        <label for="create_bot_name">{{t "Full name" }}</label>
                        <input type="text" name="bot_name" id="create_bot_name" class="required"
                          maxlength=100 placeholder="{{t 'Cookie Bot' }}" value="" />
                        <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
                    </div>
                    <div class="input-group">
                        <label for="bot_short_name">{{t "Bot email (a-z, 0-9, and dashes only)" }}</label>
                        <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
                          placeholder="{{t 'cookie' }}" value="" />
                        -bot@{{ page_params.realm_bot_domain }}
                        <div>
                            <label for="create_bot_short_name" generated="true" class="text-error"></label>
                        </div>
                    </div>
                    <div id="payload_url_inputbox">
                        <div class="input-group">
                            <label for="create_payload_url">{{t "Endpoint URL" }}</label>
                            <input type="text" name="payload_url" id="create_payload_url"
                              maxlength=2083 placeholder="https://hostname.example.com" value="" />
                            <div><label for="create_payload_url" generated="true" class="text-error"></label></div>
                        </div>
                        <div class="input-group">
                            <label for="interface_type">{{t "Outgoing webhook message format" }}</label>
                            <select name="interface_type" id="create_interface_type">
                                <option value="1">Zulip</option>
                                <option value="2">{{t "Slack compatible" }}</option>
                            </select>
                            <div><label for="create_interface_type" generated="true" class="text-error"></label></div>
                        </div>
                    </div>
                    <div id="config_inputbox">
                        {{#each page_params.realm_embedded_bots as |bot index|}}
                            {{#each bot.config as |config_value config_key|}}
                                {{> ../embedded_bot_config_item botname=bot.name key=config_key value=config_value}}
                            {{/each}}
                        {{/each}}
                    </div>
                    <div class="input-group">
                        <div id="bot_avatar_file"></div>
                        <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload profile picture' }}" />
                        <button class="button white rounded small btn-danger" style="display: none;" id="bot_avatar_clear_button">{{t "Clear profile picture" }}</button>
                        <button class="button white rounded" id="bot_avatar_upload_button">{{t "Customize profile picture" }}</button> ({{t "Optional" }})
                    </div>
                    <p>
                        <div id="bot_avatar_file_input_error" class="text-error"></div>
                    </p>
                    <button type="submit" class="button white rounded sea-green" id="create_bot_button">
                        {{t 'Create bot' }}
                    </button>
                    <div class="create_bot_spinner"></div>
                </div>
            </form>
        </div>

    </div>
</div>
