{% 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:search' %}" 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>
  <p class="m-b-md"><strong>{{ tweets|length }}</strong> Results found for: <strong>{{ keyword }}</strong></p>
  <div class="tab-container">
  	<ul class="nav nav-tabs" role="tablist">
	    <li class="active"><a href="#tab1" data-toggle="tab">Categories <span class="badge badge-sm m-l-xs">{{ tweets|length }}</span></a></li>
	    <li><a href="#tab2" data-toggle="tab">Sentiment <span class="badge bg-danger badge-sm m-l-xs">{{ tweets|length }}</span></a></li>
	  </ul>
	  <div class="tab-content">
	    <div class="tab-pane active" id="tab1">
	      <ul class="list-group no-borders pull-in m-b-none">
              {% for tweet in tweets %}
	            <li class="list-group-item">
	              <a href="#" class="h4 text-primary m-b-sm m-t-sm block">{{ tweet.author }}</a>
	              <p>{{ tweet.text }}</p>
                  <p><span class="label bg-primary pos-rlt m-r inline wrapper-xs"><i class="arrow right arrow-primary"></i> Tags:</span> <a href class="m-r-sm">{{ tweet.category }}</a>
                  </p>
	            </li>
              {% endfor %}
	      </ul>
	    </div>
	    <div class="tab-pane" id="tab2">
	      <ul class="list-group list-group-alt list-group-lg no-borders pull-in m-b-none">
              {% for tweet in tweets %}
	        <li class="list-group-item">
              <a href="#" class="h4 text-primary m-b-sm m-t-sm block">{{ tweet.author }}</a>
	          <div class="clear">
	            <a href="#" class="h4 text-primary m-b-sm block">{{ tweet.author.name }} {% if tweet.sentiment == "positive" %}<span class="label label-sm bg-success">Positive</span> {% endif %}{% if tweet.sentiment == "negative" %}<span class="label label-sm bg-danger">Negative</span> {% endif %}{% if tweet.sentiment == "neutral" %}<span class="label label-sm bg-info">Neutral</span>{% endif %}</a>
	            <div>{{ tweet.text }}</div>
	          </div>
	        </li>
              {% endfor %}
	      </ul>
	    </div>
    </div>
  </div>
</div>

{% endblock %}