{% extends "base.html" %}

{% block content %}

<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3"><i class="icon-magnifier i-sm m-r-sm"></i> Search</h1>
</div>
<div class="wrapper-md">
  <form action="{% url 'Twitter:timeline' %}" method="post" class="m-b-md">
              {% csrf_token %}
    <div class="input-group">
      <input type="text" placeholder="search ..." name="text" value="{{ text }}" class="form-control input-lg" placeholder="Type keyword">
      <span class="input-group-btn">
        <button class="btn btn-lg btn-default" type="button">Search</button>
      </span>
    </div>
  </form>
    {% if notfound %}
    <p>Couldn't find any tweets for this profile!</p>
    {% endif %}
    {% if profile %}
    <div class="col-md-8">
      <div class="row">
          <div class="col-sm-6">
          <div class="panel b-a">
            <div class="panel-heading bg-info dk no-border wrapper-lg">
                <div class="h4 font-thin m-t-sm">{{ profile.name }} timeline</div>
            </div>
            <div class="padder-v b-t b-light bg-light lter row text-center no-gutter">
              <div class="col-xs-4">
                <div>Negative</div>
                <div class="inline m-t-sm">
                  <div ui-jq="easyPieChart" ui-options="{
                      percent: {{ profile.negative |floatformat:-2 }},
                      lineWidth: 3,
                      trackColor: '#e8eff0',
                      barColor: '#7266ba',
                      scaleColor: false,
                      color: '#fff',
                      size: 65,
                      lineCap: 'butt',
                      rotate: 45,
                      animate: 1000
                    }">
                    <div>
                      <span class="step">{{ profile.negative|floatformat:-2 }}</span>%
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xs-4">
                <div>Neutral</div>
                <div class="inline m-t-sm">
                  <div ui-jq="easyPieChart" ui-options="{
                      percent: {{ profile.neutral |floatformat:-2 }},
                      lineWidth: 3,
                      trackColor: '#e8eff0',
                      barColor: '#23b7e5',
                      scaleColor: false,
                      color: '#fff',
                      size: 65,
                      lineCap: 'butt',
                      rotate: 90,
                      animate: 1000
                    }">
                    <div>
                      <span class="step">{{ profile.neutral|floatformat:-2 }}</span>%
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xs-4">
                <div>Positive</div>
                <div class="inline m-t-sm">
                  <div ui-jq="easyPieChart" ui-options="{
                      percent: {{ profile.positive|floatformat:-2 }},
                      lineWidth: 3,
                      trackColor: '#e8eff0',
                      barColor: '#fad733',
                      scaleColor: false,
                      color: '#fff',
                      size: 65,
                      lineCap: 'butt',
                      rotate: 180,
                      animate: 1000
                    }">
                    <div>
                      <span class="step">{{ profile.positive|floatformat:-2 }}</span>%
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="hbox text-center b-t b-light">
              <a href class="col padder-v text-muted b-r b-light">
                <div class="h4">{{ profile.count }}</div>
                <span>Posts</span>
              </a>
              <a href="https://twitter.com/{{ profile.name }}" class="col padder-v text-muted">
                <div class="h4">link</div>
                <span>to {{ profile.name }}</span>
              </a>
            </div>
          </div>
        </div>
                  <div class="col-sm-6">
          <div class="panel panel-default">
            <div class="panel-heading">Categories</div>
              <table class="table table-striped m-b-none">
                <thead>
                    <tr>
              <th style="width:60px;" class="text-center">Category</th>
              <th>Count</th>
            </tr>
          </thead>
          <tbody>
            {% for key, value in profile.categories.items %}
            <tr>
              <td><a href="">{{ key }}</a></td>
                <td class="text-success">{{ value }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
      </div>
        {% endif %}
</div>

{% endblock %}