templates.html

<!--
BEGIN Templates for dynamic content
-->

<script id="template__component--toast" type="text/template">
    <div class="toast__item" id="<%= id %>">
        <div class="toast__item-content">
            <h1><%= title %></h1>
            <p><%= message %></p>
        </div>
        <div class="toast__item-controls">
            <button><i class="fa fa-close"></i></button>
        </div>
    </div>
</script>

<script id="template__tag" type="text/template">
    <div class="tag"><%= tag %></div>
</script>

<script id="template__tag-bar" type="text/template">
    <div class="tag">#<%= tag %></div>
</script>

<script id="template__menu-item" type="text/template">
    <li>
        <button class="js__menu-item" data-value="<%= value %>"><%= label %></button>
    </li>
</script>

<script id="template__menu-item-icon" type="text/template">
    <li class="js__menu-item icon-left">
        <button class="js__menu-item menu__indent" data-value="<%= value %>">
            <i class="fa fa-circle-thin"></i><%= label %>
        </button>
    </li>
</script>

<script id="template__menu-header" type="text/template">
    <li>
        <button class="js__menu-item" data-value="<%= value %>"><%= label %></button>
        <ul class="menu"></ul>
    </li>
</script>

<script id="template__item-tile" type="text/template">
    <div class="item">
        <ul class="item__content item-<%= categories[0] %>" data-value="<%= id %>">
            <li class="item__image">
                <div class="item__image-wrapper">
                    <img src="<%= previewImage %>">
                </div>
            </li>
            <ul class="item__data">
                <li class="item__data-title"><%= title %></li>
                <ul class="item__data-metadata">
                    <li class="left">
                        <% _.each(categories, function(cat) { %>
                        <i class="fa fa-cube"></i><%= cat %>
                        <% }); %>
                    </li>
                    <li class="right"><i class="fa fa-puzzle-piece"></i><%= complexity %></li>
                </ul>
            </ul>
        </ul>
    </div>
</script>

<script id="template__detail-message" type="text/template">
    <div class="details__content">
        <div class="details__content-title">
            <h1><%= title %></h1>
        </div>
        <div class="details__content-description">
            <%= description %>
        </div>
    </div>
</script>


<script id="template__detail-item" type="text/template">
    <div class="details__content">

        <div class="details__content-title">
            <h1><%= title %></h1>
        </div>
        <div class="details__content-description">
            <div class="details__content-extras">
                <button id="js__content-share-button" class="basic-button details__content-share-button"><i class="fa fa-share-alt"></i><em>Share</em>
                </button>
            </div>
            <div class="details__content-description-data">
                <ul>
                    <li class="icon-left"><i class="fa fa-building fa-fw"></i>Created for <em><%= companyArea %></em> on <em><%= dateCompleted %></em></li>
                    <!--<li class="icon-left"><i class="fa fa-calendar fa-fw"></i>Completed on <em><%= dateCompleted %></em>--></li>
                    <li class="icon-left"><i class="fa fa-clock-o fa-fw"></i>The solution is <em><%= duration %></em> long</li>
                    <li class="icon-left"><i class="fa fa-cubes fa-fw"></i>The solution is a <em><%= complexity %></em> complexity <em><%= categories %></em></li>
                    <!--<li class="icon-left"><i class="fa fa-cube fa-fw"></i>The consists of <em><%= types %></em></li>-->
                    <!--<li class="icon-left"><i class="fa fa-puzzle-piece fa-fw"></i><em><%= complexity %></em> complexity</li>-->
                </ul>
            </div>

            <div class="details__content-preview-images">
                <ul>
                    <% _.each(images, function(image) { %>
                    <li>
                        <div class="floatimage__srcimage"><img src="<%= image %>" alt="<%= title %> preview image">
                        </div>
                    </li>
                    <% }); %>
                </ul>
            </div>
            <%= description %>
            <div class="details__content-description-metadata">
                <ul>
                    <% _.each(types, function(type) { %>
                    <li class="type icon-left"><i class="fa fa-cube"></i>
                        <%= type %>
                    </li>
                    <% }); %>
                    <% _.each(tags, function(tag) { %>
                    <li class="type icon-left"><i class="fa fa-tag"></i>
                        <%= tag %>
                    </li>
                    <% }); %>
                </ul>
            </div>
            <div class="details__content-links">
                <ul>
                    <% _.each(links, function(link) { %>
                    <li class="icon-left"><a href="<%= link %>" target="_blank"><i class="fa fa-external-link"></i><%= link %></a>
                    </li>
                    <% }); %>
                </ul>
            </div>
        </div>
    </div>
</script>

<!--
END
-->