{{define "body"}}
    <div class="row indent-top">
        <div class="col s12">
            <ul class="tabs" id="tab">
                <li class="tab col s6"><a class="active" href="#tab1">{{.Locale.TabSettings}}</a></li>
                <li class="tab col s6"><a class="" href="#tab2">{{.Locale.TabBots}}</a></li>
            </ul>
        </div>
        <div id="tab1" class="col s12">
            <div class="row indent-top">
                <form id="save" class="tab-el-center" action="/save/" method="POST">
                    <input name="clientId" type="hidden" value="{{.Conn.ClientID}}">
                    <div class="row">
                        <div class="input-field col s12">
                            <input placeholder="CRM Url" id="api_url" name="api_url" type="text" class="validate" value="{{.Conn.APIURL}}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input placeholder="{{.Locale.ApiKey}}" id="api_key" name="api_key" type="text" class="validate" value="{{.Conn.APIKEY}}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12 center-align">
                            <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action">
                                {{.Locale.ButtonSave}}
                                <i class="material-icons right">sync</i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id="tab2" class="col s12">
            <div class="row indent-top">
                <form id="add-bot" class="tab-el-center" action="/add-bot/" method="POST">
                    <input name="connectionId" type="hidden" value="{{.Conn.ID}}">
                    <div class="row">
                        <div class="input-field col s12">
                            <input placeholder="{{.Locale.TableToken}}" id="token" name="token" type="text" class="validate">
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12 center-align">
                            <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action">
                            {{.Locale.AddBot}} <i class="material-icons right">add</i>
                            </button>
                        </div>
                    </div>
                </form>
                <table id="bots" class="tab-el-center">
                    <thead>
                        <tr>
                            <th>{{.Locale.TableName}}</th>
                            <th>{{.Locale.TableToken}}</th>
                            <th class="text-left">{{.Locale.TableDelete}}</th>
                        </tr>
                    </thead>
                    <tbody>
                            {{range .Bots}}
                                <tr>
                                    <td>{{.Name}}</td>
                                    <td>{{.Token}}</td>
                                    <td>
                                        <button class="delete-bot btn btn-small waves-effect waves-light light-blue darken-1" type="submit" name="action"
                                                data-token="{{.Token}}">
                                            <i class="material-icons">delete</i>
                                        </button>
                                    </td>
                                </tr>
                            {{end}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{{end}}