2021-10-11 19:14:18 +03:00
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
2021-10-13 13:59:49 +03:00
<h2 class="gh-canvas-title" data-test-screen-title>Themes</h2>
2021-10-11 19:14:18 +03:00
<section class="view-actions">
2021-10-13 13:59:49 +03:00
<button type="button" class="mr4 gh-btn {{ if this .showAdvanced "gh-btn-green" }} " {{ on "click" this .toggleAdvanced }} ><span>Advanced</span></button>
2021-10-12 16:01:15 +03:00
<button type="button" class="gh-btn gh-btn-primary" {{ on "click" this .themeManagement .upload }} ><span>Upload theme</span></button>
2021-10-11 19:14:18 +03:00
</section>
</GhCanvasHeader>
<section class="view-container">
2021-10-12 12:18:55 +03:00
{{ # if this .showAdvanced }}
2021-10-13 13:59:49 +03:00
<div class="gh-themes-container-labs">
2021-10-12 12:18:55 +03:00
<GhThemeTableLabs @themes= {{ this .themes }} />
</div>
{{ / if }}
2021-10-13 13:59:49 +03:00
<div class="gh-theme-directory-container-labs">
2021-10-14 13:39:48 +03:00
<div class="theme-directory-labs">
2021-10-11 19:14:18 +03:00
{{ # each this .marketplaceThemes as | theme | }}
2021-10-12 16:27:51 +03:00
<LinkTo @route="settings.design.change-theme.view" @model= {{ theme .name }} class="td-item">
2021-10-14 19:01:12 +03:00
<div class="gh-theme-browser">
<span class="gh-theme-browser-button"></span>
2021-10-14 13:39:48 +03:00
</div>
<div class="td-item-screenshot-labs relative">
2021-10-11 19:14:18 +03:00
<img style="object-fit:contain;" src= {{ theme .image }} alt=" {{ theme .name }} Theme" />
</div>
<div class="td-item-desc">
<div> {{ theme .name }} </div>
<span>• {{ theme .category }} </span>
</div>
2021-10-12 16:27:51 +03:00
</LinkTo>
2021-10-11 19:14:18 +03:00
{{ / each }}
</div>
</div>
</section>
2021-10-13 17:40:46 +03:00
</section>
<section class="gh-theme-directory-footer-container">
2021-10-14 13:39:48 +03:00
<div class="gh-theme-directory-footer">
See more themes, free and premium, in <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="link">our official marketplace →</a>
</div>
2021-10-11 19:14:18 +03:00
</section>