
{% extends "base.html" %}
{% load static %}
{% block style-discussion-thread %}<link rel="stylesheet" href="{% static 'css/discussion_thread.css' %}">{% endblock %}

{% block nav-home %}<li><a href="/">Home</a></li>{% endblock %}          
{% block nav-subjects %}<li><a href="/subjects">My Subjects</a></li>{% endblock %}
{% block nav-search-subjects %}<li><a href="/subjects">Available Subjects</a></li>{% endblock %}
{% block nav-pending-subjects %}<li ><a href="/pending_subjects">Pending Requests</a></li>{% endblock %}
{% block body%}
<div class="container" style="margin-top:50px">
    <div class="row">
        <!-- <div class="col-sm-2">
            
        </div> -->

        <div class=" col-sm-12">
            <!-- <form action="/search/{{topic_id}}" method="POST">
                {% csrf_token %}
                <div class="btn-panel btn-panel-conversation">
                    <button type="submit" class="btn  col-sm-3 send-message-btn pull-left" ><i class="fa fa-search"></i> Search</button>

                    <input name="search" type="text" id="search" placeholder="Search for something.." class="search-input"/>                    
                </div>
            </form> -->
            <!-- <div class="btn-panel btn-panel-conversation">
                <a href="search/{{topic_id}}" class="btn  col-sm-3 send-message-btn pull-left" role="button"><i class="fa fa-search"></i> Search</a><input type="search" id="mySearch" placeholder="Search for something..">
                
            </div> -->

            <!-- <div class="btn-panel btn-panel-msg">

                <a href="" class="btn  col-sm-3  send-message-btn pull-right" role="button"><i class="fa fa-gears"></i> Settings</a>
            </div> -->
        </div>
    </div>
    <div class="row">

        


        <div class="message-wrap col-sm-12">
            <div class="msg-wrap">

                {% for thread in threads %}  
                    <div class="media msg card bg-success text-white">
                        <!-- <a class="pull-left" href="#">
                            <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 32px; height: 32px;" src="">
                        </a> -->
                        <div class="media-body card-body">
                            
                            <h4 class="media-heading">{{thread.title}}</h4>
                            <div><span class="msg-owner"> - {{thread.person.fname}}</span>
                            <span class="time"><i class="fa fa-clock-o"></i> {{thread.time}}</span></div>
                            <small class="col-lg-10">{{thread.msg}}</small>
                        </div>
                        <div class="msg-footer-link col-sm-6 col-lg-4">
                            <!-- <a><div class="col-sm-4 col-lg-4 fa fa-comment"><span> </span>Reply <span>999</span></div></a> -->
                            <!-- <div class="col-sm-1">|</div> -->
                            <a href="/threads/like/{{thread.id}}/{{topic_id}}">
                                <div class="col-sm-4 col-lg-4 fa fa-thumbs-up"><span> </span>Agree <span>{{thread.likes}}</span></div>
                            </a>
                            <!-- <div class="col-sm-1">|</div> -->
                            <a href="/threads/dislike/{{thread.id}}/{{topic_id}}">
                                <div class="col-sm-4 col-lg-4 fa fa-thumbs-down"><span> </span>Disagree <span>{{thread.dislikes}}</span></div>
                            </a>
                        </div>
                    </div>
                {% endfor %}  
        </div>
        <div class="send-wrap ">
            <form method="POST" class="post-form" action="/threads/{{topic_id}}">
                {% csrf_token %}
            
            <div>
                {{form.title}}
            </div>
            <div>
                {{form.msg}}
            </div>
        </div>
        <div class="">
            <button type="submit" class=" col-sm-4 btn   send-message-btn" role="button"><i class="fa fa-plus"></i> Reply</a>
        </div>
    </div>
</div>
{% endblock %}
