<!doctype html>
<html>
   <head>
      <title>Website Tracker</title>
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
      <link rel="stylesheet" type="text/css" href="/css/bootstrap-responsive.min.css" />
      <link rel="stylesheet" type="text/css" href="/css/style.css" />
      <link rel="stylesheet" type="text/css" href="/css/datepicker.css" />     
    
   </head>

<body>
  <div class="navbar navbar-fixed-top m-header">
    <div class="navbar-inner m-inner">
      <div class="container-fluid">
        <img width="160" height="40" src="/img/logo.png" alt="Logo">          
        <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>       
        <div class="btn-group pull-right">
          <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
          <i class="icon-user"></i> <%= req.user.full_name %>
          <span class="caret"></span>
          </a>                  
          <ul class="dropdown-menu">
            <li><a href="/users/edit"> <i class="icon-edit"></i> My Account </a></li>
            <li><a href="/users/settings"> <i class="icon-cog"></i> Settings </a></li>
            <li class="divider"></li>
            <li><a href="/logout"> <i class="icon-off"></i> Logout </a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="m-top"></div>
  <aside class="sidebar">
    <ul class="nav nav-tabs nav-stacked">
      <li <%= req.url == "/" ?  'class=active' : "" %> >
        <a href="/">
          <div>
            <div class="ico">
              <img src="/img/ico/ico-home.png">
            </div>
            <div class="title">
              Websites
            </div>
          </div>
          <div class="arrow">
            <div class="bubble-arrow-border"></div>
            <div class="bubble-arrow"></div>
          </div>
        </a>
      </li>
      <li <%= req.url == "/phones" ?  'class=active' : "" %> >
        <a href="/phones">
          <div>
            <div class="ico">
              <img src="/img/ico/ico-notification.gif">
            </div>
            <div class="title">
              Phones
            </div>
          </div>
          <div class="arrow">
            <div class="bubble-arrow-border"></div>
            <div class="bubble-arrow"></div>
          </div>
        </a>
      </li>
    </ul>
  </aside>

    <div class="m-sidebar-collapsed">
    <ul class="nav nav-pills">         
    </ul>
    <div class="arrow-border">
      <div class="arrow-inner"></div>
    </div>
  </div>

    <div class="main-container" style="height: 527px;">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span4"></div>
        <div class="span4 flashy">
          <% if (req.session.messages && typeof req.session.messages != 'undefined') { %> 
            <% messages = req.session.messages %>
            <div class="alert alert-<%= messages.type %>">
              <a class="close" data-dismiss="alert">×</a>
              <%= messages.message %>
            </div>
            <% req.session.messages = null %>
          <% } %>          
        </div>
        <div class="span4"></div>
      </div>
    </div>