<section class="gh-canvas">
    <header class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            {{#link-to "settings.integrations"}}Integrations{{/link-to}}
            <span>{{svg-jar "arrow-right"}}</span>
            AMP
        </h2>
        <section class="view-actions">
            {{gh-task-button task=save class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button=true}}
        </section>
    </header>

    {{#if showLeaveSettingsModal}}
        {{gh-fullscreen-modal "leave-settings"
            confirm=(action "leaveSettings")
            close=(action "toggleLeaveSettingsModal")
            modifier="action wide"}}
    {{/if}}

    <section class="view-container">
        <br>
        <section class="app-grid">
            <div class="app-cell">
                <img class="app-icon" src="assets/img/ampicon.png" />
            </div>
            <div class="app-cell">
                <h3>AMP</h3>
                <p>Accelerated Mobile Pages</p>
            </div>
        </section>

        <div class="gh-setting-header">AMP configuration</div>
        <div class="gh-setting">
            <div class="gh-setting-content">
                <div class="gh-setting-title">Enable AMP</div>
                <div class="gh-setting-desc">Enable <a href="https://ampproject.org" target="_blank">Google Accelerated Mobile Pages</a> for your posts</div>
            </div>
            <div class="gh-setting-action">
                <div class="for-checkbox">
                    <label for="amp" class="checkbox">
                        <input
                            type="checkbox"
                            checked={{ampSettings}}
                            id="amp"
                            name="amp"
                            onclick={{action "update" value="target.checked"}}
                            data-test-amp-checkbox
                        >
                        <span class="input-toggle-component"></span>
                    </label>
                </div>
            </div>
        </div>
    </section>
</section>
