<div class="qui-addBrick-container">
    <aside class="qui-addBrick__aside" data-name="aside">
        <div class="header">
            <h2 class="title">{{asideTitle}}</h2>
            <p class="desc">{{asideDesc}}</p>
        </div>
        <div class="top">
            <div class="toolbar">
                <button class="btn btn-light-outline btn--import" id="importBtn" title="{{asideBtnImportTitle}}"
                        aria-label="{{asideBtnImportTitle}}">
                    <span class="fa fa-code"></span>
                </button>

                <div class="search">
                    <input data-name="search-input" type="search" placeholder="{{asideInputPlaceholder}}" autocomplete="off">
                    <i class="fa fa-search icon-search" aria-hidden="true"></i>
                </div>

                <select data-name="package-filter" aria-label="{{asideSelectTitle}}">
                    <option value="all">{{asideSelectOptionAll}}</option>
                    {{#packageList}}
                    <option value="{{value}}">{{label}}</option>
                    {{/packageList}}
                </select>
            </div>
            <div class="hint hint--shortcuts" aria-label="Tastatursteuerung" data-name="shortcut-hints" hidden>
                <div class="qui-addBrick__shortcutList">
                    <div class="qui-addBrick__shortcutItem">
                        <div class="qui-addBrick__shortcutKeys" aria-hidden="true">
                            <kbd class="key" title="Pfeil hoch">↑</kbd>
                            <kbd class="key" title="Pfeil runter">↓</kbd>
                        </div>
                        <div class="qui-addBrick__shortcutText">{{asideKeyboardNavigationDescription}}</div>
                    </div>

                    <div class="qui-addBrick__shortcutItem">
                        <div class="qui-addBrick__shortcutKeys" aria-hidden="true">
                            <kbd class="key" title="Enter">Enter</kbd>
                        </div>
                        <div class="qui-addBrick__shortcutText">{{asideKeyboardCreateDescription}}</div>
                    </div>

                    <div class="qui-addBrick__shortcutItem">
                        <div class="qui-addBrick__shortcutKeys" aria-hidden="true">
                            <kbd class="key" title="{{shortcutModifierLabel}}">{{shortcutModifierLabel}}</kbd>
                            <span class="sep">+</span>
                            <kbd class="key" title="Shift">Shift</kbd>
                            <span class="sep">+</span>
                            <kbd class="key" title="Punkt">.</kbd>
                        </div>
                        <div class="qui-addBrick__shortcutText">{{asideKeyboardImportText}}</div>
                    </div>
                </div>
            </div>
            <div class="hint">
                <span data-name="brick-count"><strong>0</strong> Bricks</span>
                <div class="qui-addBrick__hintActions">
                    <div data-name="selected-package"></div>
                    <button class="btn btn-light-outline btn--shortcutToggle"
                            type="button"
                            data-name="toggle-shortcuts"
                            title="{{shortcutToggleShowTitle}}"
                            aria-label="{{shortcutToggleShowTitle}}"
                            aria-expanded="false">
                        <span class="fa fa-angle-down" aria-hidden="true"></span>
                        <span class="label">{{shortcutToggleLabel}}</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="qui-addBrick__list" data-name="brickList" data-show-deprecated="0">
            {{#brickList}}
            <div class="qui-addBrick__item" data-name="item" data-control="{{control}}" data-package="{{displayPackage}}" data-search="{{search}}" data-deprecated="{{deprecated}}" data-recommended="{{recommended}}">
                <div class="thumb">
                    <img src="{{thumbnail}}" alt="{{displayTitle}}">
                </div>

                <div class="meta">
                    <div class="name">{{displayTitle}}</div>

                    <div style="line-height: 1;">
                        <span class="badge badge-success-light badge-sm">{{displayPackage}}</span>
                        {{#deprecated}}
                        <span class="badge badge-danger badge-sm">{{deprecatedText}}</span>
                        {{/deprecated}}
                        {{#recommended}}
                        <span class="badge badge-warning badge-sm">{{{recommendedText}}}</span>
                        {{/recommended}}
                    </div>

                    <div class="desc">{{displayDescriptionPreview}}</div>
                </div>
            </div>
            {{/brickList}}
        </div>
        <div class="qui-addBrick__asideFooter">
            <label class="toggle">
                <input type="checkbox" data-name="toggle-deprecated">
                <span data-name="toggle-deprecated-text">{{asideFooterToggleDeprecated}}</span>
            </label>
        </div>
</aside>
<div class="qui-addBrick__main" data-name="main">
    <div class="brickDetails">
        <div class="brickDetails__top">
            <h2 class="title" data-name="detail-title">Demo title</h2>
            <div class="brickDetails-top__action">
                <button class="btn btn-success" data-name="next"><span class="fa fa-plus"></span> {{detailsBtnAdd}}</button>
            </div>
        </div>

        <div class="brickDetails__content">
            <div class="brickDetails__hero" aria-label="Hauptbild">
                <img id="dHero" data-name="detail-hero" alt="Hero Banner" src="/packages/quiqqer/bricks/bin/images/mockup-placeholder.svg">
            </div>

            <div class="section brickDetails__info">
                <div class="section-label">{{detailsSectionInfo}}</div>
                <div data-name="details-section-info">
                    <span class="badge badge-success-light" data-name="detail-package">quiqqer/bricks</span> <span data-name="detail-control"></span>
                </div>
            </div>

            <div class="section brickDetails__fullDesc">
                <div class="section-label">{{detailsSectionDesc}}</div>
                <div class="desc" data-name="detail-description">Demo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, quam.</div>
            </div>

            <div class="section brickDetails__gallery">
                <div class="section-label">{{detailsSectionGallery}} <span class="badge badge-light">0</span></div>
                <div class="images" data-name="detail-gallery"></div>
            </div>
        </div>

    </div>
</div>
</div>
