{{template "header"}}
<style>
    .deployment-guide {
        padding: 24px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .deployment-section {

        padding: 20px;
        background: #f8fafc;
        border-radius: 8px;
    }
    .el-input {
        width: 100%;
    }
    .el-input__inner {
        height: 40px;
        font-size: 14px;
        padding: 0 12px;
    }
    .el-step__title {
        font-size: 14px;
    }
    .el-step__description {
        font-size: 12px;
    }
    h2 {
        color: #303133;
        font-size: 24px;
        margin-bottom: 20px;
    }
    h3 {
        color: #606266;
        font-size: 18px;
        margin-bottom: 16px;
    }
    #app {
        background: #f5f7fa;
    }
    .el-card {
        border-radius: 8px;
    }
    .el-card__header {
        padding: 18px 20px;
    }
</style>
<div id="app" style="width:100%;background: #f5f7fa">
    <template>
        <div style="padding: 20px">
            <el-card class="deployment-guide">
                <div slot="header" class="clearfix">
                    <h2>Quick Start</h2>
                </div>

                <div class="deployment-section">
                    <p>To immediately access your customer support chat interface</p>
                    <p>Your live chat endpoint is available at:</p>
                    <el-input v-model="chatEndpoint" readonly style="width: 100%; margin-top: 10px;">
                        <el-button slot="append" icon="el-icon-link"
                                   v-on:click="openChatWindow(chatEndpoint)"
                                   title="Open chat in new window"></el-button>
                        <el-button slot="append" icon="el-icon-document-copy"
                                   v-on:click="copyText(chatEndpoint)"
                                   title="Copy link"></el-button>
                    </el-input>
                </div>
                <div class="deployment-section">
                    <p>Add the following code (via copy/paste) at the bottom of the web page (immediately before the &lt;/body> tag).</p>
                    <el-input style="width: 100%; margin-top: 10px;" type="textarea" v-model="deployCode"  :rows="20" readonly>
                    </el-input>
                </div>
            </el-card>
        </div>

    </template>

</div>
</body>

<script>
    const ACTION="pannel";
</script>
{{template "setting_bottom" .}}