{% extends "base.html" %}

{% block content %}
  <!-- main -->
  <div class="col">
    <!-- main header -->
    <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-sm-6 col-xs-12">
          <h1 class="m-n font-thin h3 text-black">Dashboard</h1>
          <small class="text-muted">Let's do some social network analysis!</small>
        </div>
      </div>
    </div>
    <!-- / main header -->
    <div class="wrapper-md" ng-controller="FlotChartDemoCtrl">
      <!-- stats -->
      <div class="row">
        <div class="col-md-5">
          <div class="row row-sm text-center">
            <div class="col-xs-6">
              <a href class="block panel padder-v bg-info item">
                <span class="text-white font-thin h1 block">Twitter</span>
                <span class="text-muted text-xs">analysis</span>
                <span class="top text-left">
                  <i class="fa fa-caret-up text-warning m-l-sm"></i>
                </span>
              </a>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="panel panel-default">
            <div class="panel-heading">Profiles</div>
              <table class="table table-striped m-b-none">
                <thead>
                    <tr>
              <th style="width:60px;" class="text-center">Name</th>
              <th>Computed</th>
              <th style="width:70px;"></th>
            </tr>
          </thead>
          <tbody>
            {% if profiles %}
            {% for profile in profiles %}
            <tr>
              <td><a href="{% url 'Twitter:timeline' profile.id %}">{{ profile.name }}</a></td>
                <td class="text-success">
                    {% if profile.computed %}
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                    {% else %}
                        <a href ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                    {% endif %}
              </td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
{% endblock %}