linguist/samples/EJS/page.ejs

<% include ../parts/depend %>

<div class="row">
  <% include sidebar %>
  <div class="col-lg-offset-3 col-lg-9 main-content">
    <div class="page-title">
      <h1>Pieces</h1>
      <% if (pieces.length == 1) { %>
        <p>You have
          <strong>1</strong>
          piece to practice</p>
      <% } else { %>
        <p>You have
          <strong><%= pieces.length %></strong>
          pieces to practice</p>
      <% } %>
    </div>
    <div class="row">
      <% if (pieces == undefined || pieces.length == 0) { %>
        <div class="error-main">
          <h1>No Pieces</h1>
          <p>You have no
            <strong>Pieces</strong>
            assigned.</p>
        </div>
      <% } else { %>
        <div class="col-lg-12 section-title">
          <div style="margin-top: 10px; margin-bottom: 10px;" class="btn-group" role="group">
            <button id="inProgressButton" type="button" class="btn btn-md btn-super-round btn-focus-off btn-primary btn-primary-active">In Progress</button>
            <button id="completedButton" type="button" class="btn btn-md btn-super-round btn-focus-off btn-purple">Completed</button>
          </div>
        </div>

        <div id="inProgressPieces">
          <% if (inProgressPieces == undefined || inProgressPieces.length == 0) { %>
            <center>
              <h2>No Pieces in Progress</h2>
            </center>
          <% } else { %>
            <% for (var i = 0; i < inProgressPieces.length; i++) { %>
              <div class="col-lg-6">
                <div class="box">
                  <div class="title">
                    <h1>
                      <a href="/pieces/practice/<%= inProgressPieces[i].id %>"><%= inProgressPieces[i].title %></a>
                    </h1>
                    <p>By
                      <strong><%= inProgressPieces[i].author %></strong>
                    </p>
                    <p>
                      Teacher:
                      <strong><%= inProgressPieces[i].teacherName %></strong>
                    </p>
                    <p>Average Practice Time:
                      <strong><%= inProgressPieces[i].averagePracticeTime %>
                        mins</strong>
                    </p>
                    <a href="/pieces/practice/<%= inProgressPieces[i].id %>" class="btn btn-success btn-block">Practice
                      <%= inProgressPieces[i].title %></a>
                  </div>
                </div>
              </div>
            <% } %>
          <% } %>
        </div>

        <div id="completedPieces" style="display: none;">
          <% if (completedPieces == undefined || completedPieces.length == 0) { %>
            <center>
              <h2>No Completed Pieces</h2>
            </center>
          <% } else { %>
            <% for (var i = 0; i < completedPieces.length; i++) { %>
              <div class="col-lg-6">
                <div class="box">
                  <div class="title">
                    <h1>
                      <a href="/pieces/practice/<%= completedPieces[i].id %>"><%= completedPieces[i].title %></a>
                    </h1>
                    <p>By
                      <strong><%= completedPieces[i].author %></strong>
                    </p>
                    <p>
                      Teacher:
                      <strong><%= completedPieces[i].teacherName %></strong>
                    </p>
                    <p>Average Practice Time:
                      <strong><%= completedPieces[i].averagePracticeTime %>
                        mins</strong>
                    </p>
                    <a href="/pieces/practice/<%= completedPieces[i].id %>" class="btn btn-success btn-block">Practice
                      <%= completedPieces[i].title %></a>
                  </div>
                </div>
              </div>
            <% } %>
          <% } %>
        </div>
      <% } %>
    </div>
  </div>
</div>