<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="settings">Settings</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            Unsplash
        </h2>
        <section class="view-actions">
            <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
        </section>
    </GhCanvasHeader>

    {{#if this.showLeaveSettingsModal}}
        <GhFullscreenModal @modal="leave-settings"
            @confirm={{action "leaveSettings"}}
            @close={{action "toggleLeaveSettingsModal"}}
            @modifier="action wide" />
    {{/if}}

    <section class="view-container">
        <section class="gh-main-section bt app-grid">
            <div class="gh-main-section-block app-detail-heading app-grid">
                <div class="app-cell">
                    <img class="app-icon pa2 id-unsplash" src="assets/icons/unsplash.svg" />
                </div>
                <div class="app-cell">
                    <h3>Unsplash</h3>
                    <p>Beautiful, free photos</p>
                </div>
            </div>
        </section>

        <section class="gh-main-section">
            <h4 class="gh-main-section-header small bn">Unsplash configuration</h4>
            <div class="gh-main-section-block">
                <div class="gh-main-section-content grey">
                    <div class="gh-setting-first gh-setting-last" id="unsplash-toggle">
                        <div class="gh-setting-content">
                            <div class="gh-setting-title">Enable Unsplash</div>
                            <div class="gh-setting-desc mb0">Enable <a href="https://unsplash.com" target="_blank" rel="noopener noreferrer">Unsplash</a> image integration for your posts</div>
                        </div>
                        <div class="gh-setting-action">
                            <div class="form-group right gh-setting-unsplash-checkbox">
                                <div class="for-checkbox">
                                    <label for="unsplash" class="checkbox">
                                            <input
                                                type="checkbox"
                                                checked={{this.settings.unsplash}}
                                                id="unsplash"
                                                name="unsplash"
                                                onclick={{action "update" value="target.checked"}}
                                                data-test-unsplash-checkbox
                                            >
                                            <span class="input-toggle-component"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</section>
