{{^projectId}}

    <a
        href="javascript:Installer.Pages.projectForm.showProject()"
        class="btn btn-default btn-lg cp-button btn-show-project">
        Use a Project
    </a>

{{/projectId}}

<div data-manager="#themeList">

    {{^projectId}}

        <p class="lead">Choose some starter themes to include (optional).</p>

        <!-- Search -->
        <form id="installThemesForm" onsubmit="Installer.Pages.projectForm.searchSubmit(this); return false">
            <div class="product-search">
                <input
                    class="product-search-input search-input-lg typeahead"
                    placeholder="search themes..."
                    id="themeSearchInput"
                    data-handler="onSearchThemes"
                    />
            </div>
        </form>

    {{/projectId}}

    <div class="row">

        <div class="col-md-7">

            <!-- Included themes -->
            <div id="themeList" class="product-list-manager" data-handler="onThemeDetails" data-view="project/theme" data-set="includedThemes">
                <h4 class="section-header">Included <small>(<span class="product-counter">0</span>)</small></h4>
                <div class="product-list-empty">
                    <p>There are no themes included.</p>
                </div>
                <ul class="product-list theme-list"></ul>
            </div>

        </div>
        <div class="col-md-5">

            {{^projectId}}

                <!-- Recommended extras -->
                <div class="suggested-products-container animated-content">
                    <h4 class="section-header">Recommended</h4>
                    <div class="scroll-panel">
                        <div class="row suggested-products" id="suggestedThemes" data-handler="onGetPopularThemes" data-set="suggestedThemes"></div>
                    </div>
                </div>

            {{/projectId}}

                <div class="callout callout-success">
                    <h4>{{ projectName }}</h4>
                    <p>These themes are included with the project <strong>{{ projectName }}</strong>.</p>
                </div>

            {{#projectId}}

        </div>

    </div>

</div>