<section class="gh-canvas">
    <header class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>Apps</h2>
    </header>

    <section class="apps-grid-container">
        <span class="apps-grid-title">Available integrations</span>
        <div class="apps-grid">
            <div class="apps-grid-cell" data-test-app="slack">
                {{#link-to "settings.apps.slack" data-test-link="slack"}}
                <article class="apps-card-app">
                    <div class="apps-card-left">
                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png)"></figure>
                        <div class="apps-card-meta">
                            <h3 class="apps-card-app-title">Slack</h3>
                            <p class="apps-card-app-desc">A messaging app for teams</p>
                        </div>
                    </div>
                    <div class="gh-card-right">
                        <div class="apps-configured">
                            {{#if settings.slack.isActive}}
                                <span class="green" data-test-app-status>Active</span>
                            {{else}}
                                <span data-test-app-status>Configure</span>
                            {{/if}}
                            {{svg-jar "arrow-right"}}
                        </div>
                    </div>
                </article>
                {{/link-to}}
            </div>

            <div class="apps-grid-cell" data-test-app="amp">
                {{#link-to "settings.apps.amp" data-test-link="amp"}}
                <article class="apps-card-app">
                    <div class="apps-card-left">
                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/ampicon.png)"></figure>
                        <div class="apps-card-meta">
                            <h3 class="apps-card-app-title">AMP</h3>
                            <p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
                        </div>
                    </div>
                    <div class="gh-card-right">
                        <div class="apps-configured">
                            {{#if settings.amp}}
                                <span class="green" data-test-app-status>Active</span>
                            {{else}}
                                <span data-test-app-status>Configure</span>
                            {{/if}}
                            {{svg-jar "arrow-right"}}
                        </div>
                    </div>
                </article>
                {{/link-to}}
            </div>

            <div class="apps-grid-cell" data-test-app="unsplash">
                {{#link-to "settings.apps.unsplash" data-test-link="unsplash"}}
                <article class="apps-card-app">
                    <div class="apps-card-left">
                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/unsplashicon.png);background-size:45px;"></figure>
                        <div class="apps-card-meta">
                            <h3 class="apps-card-app-title">Unsplash</h3>
                            <p class="apps-card-app-desc">Beautiful, free photos</p>
                        </div>
                    </div>
                    <div class="gh-card-right">
                        <div class="apps-configured">
                            {{#if settings.unsplash.isActive}}
                                <span class="green" data-test-app-status>Active</span>
                            {{else}}
                                <span data-test-app-status>Configure</span>
                            {{/if}}
                            {{svg-jar "arrow-right"}}
                        </div>
                    </div>
                </article>
                {{/link-to}}
            </div>

            <div class="apps-grid-cell" data-test-app="zapier">
                {{#link-to "settings.apps.zapier" data-test-link="zapier"}}
                <article class="apps-card-app">
                    <div class="apps-card-left">
                        <figure class="apps-card-app-icon" style="background-image:url(assets/img/zapiericon.png);background-size:45px;"></figure>
                        <div class="apps-card-meta">
                            <h3 class="apps-card-app-title">Zapier</h3>
                            <p class="apps-card-app-desc">Automation for your favourite apps</p>
                        </div>
                    </div>
                    <div class="gh-card-right">
                        <div class="apps-configured">
                            <span data-test-app-status>Configure</span>
                            {{svg-jar "arrow-right"}}
                        </div>
                    </div>
                </article>
                {{/link-to}}
            </div>
        </div>
        <p class="apps-grid-note">(More coming soon!)</p>
    </section>
</section>
