<div class="tab-group tabs">
    <ul class="problem-type-tabs nav-tabs">
        <li class="current">
            <a class="link-tab" href="#tab1"><%= gettext("Common Problem Types") %></a>
        </li>
        <li>
            <a class="link-tab" href="#tab2"><%= gettext("Advanced") %></a>
        </li>
    </ul>
    <div class="tab current" id="tab1">
        <ul class="new-component-template">
            <% for (var i = 0; i < templates.length; i++) { %>
                <% if (templates[i].is_common) { %>
                    <% if (!templates[i].boilerplate_name) { %>
                    <li class="editor-md empty">
                        <a href="#" data-category="<%= templates[i].category %>">
                            <span class="name"><%= templates[i].display_name %></span>
                        </a>
                    </li>
                    <% } else { %>
                    <li class="editor-md">
                        <a href="#" data-category="<%= templates[i].category %>"
                           data-boilerplate="<%= templates[i].boilerplate_name %>">
                            <span class="name"><%= templates[i].display_name %></span>
                        </a>
                    </li>
                    <% } %>
                <% } %>
            <% } %>
        </ul>
    </div>
    <div class="tab" id="tab2">
        <ul class="new-component-template">
            <% for (var i = 0; i < templates.length; i++) { %>
                <% if (!templates[i].is_common) { %>
                <li class="editor-manual">
                    <a href="#" data-category="<%= templates[i].category %>"
                       data-boilerplate="<%= templates[i].boilerplate_name %>">
                        <span class="name"><%= templates[i].display_name %></span>
                    </a>
                </li>
                <% } %>
            <% } %>
        </ul>
    </div>
</div>
<a href="#" class="cancel-button"><%= gettext("Cancel") %></a>