<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            Zapier
        </h2>
    </GhCanvasHeader>

    <section class="view-container bt b--lightgrey-d1 pt5">
        <section class="app-grid">
            <div class="app-cell">
                <div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
                    <img class="app-icon" src="assets/img/zapier.svg" />
                </div>
            </div>
            <div class="app-cell">
                <h3>Zapier</h3>
                <p>Automation for your favourite apps</p>
            </div>
        </section>

        <div class="m15 mt4">
            <table class="ma0 shadow-1 bg-grouped-table br3" style="table-layout: fixed">
                <tbody>
                    <tr class="bb b--lightgrey">
                        <td class="pa3 w50 fw7 v-top">Admin API Key</td>
                        <td class="pa0">
                            <div class="pa3 relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
                                <span class="midgrey truncate" data-test-text="admin-key">
                                    {{this.integration.adminKey.secret}}
                                </span>
                                <div class="absolute top-2 right-2 flex items-stretch child">
                                    <button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2 bg-white" data-tooltip="Regenerate">
                                        {{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
                                    </button>
                                    <button type="button" {{action (perform this.copyAdminKey)}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
                                        {{#if this.copyAdminKey.isRunning}}
                                        {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
                                        {{else}}
                                        Copy
                                        {{/if}}
                                    </button>
                                </div>
                            </div>
                            {{#if (eq this.regeneratedKeyType this.integration.adminKey.type)}}
                                <div class="green nt3 mb2 pl3"> Admin API Key was successfully regenerated </div>
                            {{/if}}
                        </td>
                    </tr>
                    <tr>
                        <td class="pa3 w50 fw7">API URL</td>
                        <td class="pa0 truncate">
                            <div class="pa3 relative truncate {{unless this.copyApiUrl.isRunning "hide-child-instant"}}">
                                <span class="midgrey" data-test-text="api-url">
                                    {{this.apiUrl}}
                                </span>
                                <div class="absolute top-1 right-2">
                                    <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--4 nudge-right--1">
                                        <button type="button" {{action (perform this.copyApiUrl)}} class="white fw4 flex items-center">
                                            {{#if this.copyApiUrl.isRunning}}
                                                {{svg-jar "check-circle" class="w3 v-mid mr2"}} Copied
                                            {{else}}
                                                Copy
                                            {{/if}}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="mt12" id="zapier-toggle">
            <div class="gh-setting-content gh-setting-content--no-action">
                <div class="gh-setting-title">Zapier Templates</div>
                <div class="gh-setting-desc mt1">Explore pre-built templates for common automation tasks</div>
                <div class="gh-setting-content-extended">
                    <div id="zapier-templates">
                        {{!-- we don't want the script loading during tests because it errors --}}
                        {{#unless this.isTesting}}
                            <script src="https://zapier.com/apps/embed/widget.js?services=ghost&container=true&limit=10&html_id=zapier-templates"></script>
                        {{/unless}}
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>

{{#if this.showRegenerateKeyModal}}
    <GhFullscreenModal @modal="regenerate-key"
        @model={{hash
            apiKey=this.selectedApiKey
            integration=this.integration
            internalIntegration="zapier"
        }}
        @confirm={{action "regenerateKey"}}
        @close={{action "cancelRegenerateKeyModal"}}
        @modifier="action wide" />
{{/if}}
