<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../favicon.ico"> -->

    <title>brainy-project</title>

    <!-- Minified brainy-project CSS -->
    <link href="assets/css/bootstrap-theme.css.map" rel="stylesheet">
    <link href="assets/css/bootstrap.css.map" rel="stylesheet">
    <link href="assets/css/brainy-project.css" rel="stylesheet">
  </head>

  <body role="document">
    <!-- Floating brainy logo -->
    <div id="brainy-logo"><img width="96" height="96" src="assets/images/brainy_logo.png" /></div>
    <!-- Rendered -->
    <div id="rendered"></div>
    <!-- Modal -->
    <div class="modal fade bs-output-modal-lg" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="largeModalLabel">Output</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"> Close</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Template -->
    <div id="template" style="display: none;">
    <!-- Fixed navbar -->    
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>          
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">          
            <li class="active"><a href="#">Report</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Pipes <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                {{#report.project.pipes}}
                <li><a href="#{{name}}">{{name}}</a></li>
                {{/report.project.pipes}}
                <!-- <li class="divider"></li>
                <li class="dropdown-header">actions</li>
                <li><a href="#">run</a></li>
                <li><a href="#">clean</a></li>
                <li><a href="#">restart</a></li> -->
              </ul>
            </li>
            <li><a href="#about">Project Info</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><strong>Help</strong><span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
               <li class="dropdown-header">brainy</li>
              <li><a href="https://github.com/pelkmanslab/brainy#documentation">Documentation</a></li>
              <li><a href="https://github.com/pelkmanslab/brainy#faq">FAQ</a></li>
              <li><a href="https://github.com/pelkmanslab/brainy#github">GitHub</a></li>
              <li class="dropdown-header">iBRAIN</li>
              <li><a href="https://github.com/pelkmanslab/iBRAIN#tutorials">Tutorials</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron brainy-bild">
        <p style="float: left;">
          <h2>{{report.project.name}} | <span class="text-muted">generated by brainy {{report.project.brainy_version}} </span></h2>
        </p>

        <br>

        <p style="float: left;">Project has &nbsp;
          <div class="btn-group btn-group-md" role="group" aria-label="...">
            <button class="btn btn-primary" type="button"><span class="badge">{{report.project.pipes.length}}</span> pipes</button>
          </div>          
          <div class="btn-group btn-group-md" role="group" aria-label="...">
            <button type="button" class="btn btn-warning"><span class="badge">0</span> jobs running</button>
          </div>
          <div class="btn-group btn-group-md" role="group" aria-label="...">
            <button type="button" class="btn btn-info">latest report is from <span class="badge">{{report.finished_at}}</span></button>
          </div>
          <div style="margin-" class="btn-group btn-group-md" role="group" aria-label="...">
            <button type="button" class="btn btn-default">status:</button>
            <button type="button" class="btn btn-success">complete</button>
          </div>
        </p>

        

        <p>You can browse through previous reports below:</p>
        <div class="btn-group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Browse more reports <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            {{#reports.report_files}}
            <li><a href="#">{{name}}</a></li>
            {{/reports.report_files}}
          </ul>
        </div>
      </div>

      <div class="page-header">
        <h2></h2>
      </div>
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        {{#report.project.pipes}}
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 id="{{name}}" name="{{name}}" class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                {{name}}
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <div class="panel panel-default">
                <div class="panel-body">
                  <div class="btn-group btn-group-xs" role="group" aria-label="">
                  <button type="button" class="btn btn-default">status:</button>
                  <button type="button" class="btn btn-success">complete</button>
                </div>
                <div class="btn-group btn-group-xs" role="group" aria-label="">
                  <button type="button" class="btn btn-default">jobs running:</button>
                  <button type="button" class="btn btn-warning">0</button>
                </div>
                </div>
              </div>
              <br>              
              {{#processes}}                                  
                  {{{renderProcess}}}                
              {{/processes}}              
            </div>
          </div>
        </div>
        {{/report.project.pipes}}        
      </div>
   
  </div> <!-- /container -->
  </div>
    <!-- brainy project core JavaScript -->
    <script src="assets/js/brainy-project-core.min.js"></script>
    <script src="assets/js/brainy-project-main.js"></script>
  </body>
</html>
