{% extends 'base.html'%}
{% load static %}
{% load humanize %}
{% block css %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/activities.css' %}">
{% endblock %}

{% block content %}
    <main class="main container">
        <div class="col-md-12 mt-3">
            <form method="post" id="description-form" role="form" action="activities">
                <input type="hidden" name="post_id" id="post_id" value="" />
                <!-- Job Description -->
                <div class="form-group row">
                    <!-- <label class="col-sm-2 col-form-label"> Job Description <span class="red">*</span></label> -->
                    <div class="col-sm-12">
                        <textarea class="form-control" id="description_1" name="description" rows="6"></textarea>

                        <a class="btn btn-info btn-md mt-1 float-right" style="padding:0.375rem 0.75rem;" onclick="submit_post()">
                            <i class="fas fa-plus fa-sm">&nbsp;&nbsp; Post</i>
                        </a>
                    </div>
                </div>
            <form>

            <div class="form-group row">
                {% for post in rendered_data %}
                    <div class="container bootstrap snippet">
                        <div class="col-sm-12">
                            <div class="panel panel-white post panel-shadow mt-2 mb-2">
                                <div class="post-heading">
                                    <div class="pull-left image">
                                        <img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
                                    </div>

                                    <a class="float-right" >
                                        <i class="fas fa-pen"></i>
                                    </a>

                                    <div class="pull-left meta">
                                        <div class="title h5">
                                            <a href="#"><b> {{ post.user }} </b></a>
                                            made a post.
                                            <h6 class="text-muted time"> {{ post.posted_time|naturaltime }} </h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="post-description">
                                    <p> {{ post.description }} </p>
                                    <div class="stats">
                                        <a href="#" class="btn btn-default stat-item">
                                            <i class="fa fa-thumbs-up icon"></i> {{ post.like_count }}
                                        </a>
                                        <a href="#" class="btn btn-default stat-item">
                                            <i class="fa fa-share icon"></i> {{ post.share_count }}
                                        </a>
                                    </div>
                                </div>

                                <form method="post" id="description-form" role="form" action="activities">
                                    <input type="hidden" name="post_id" id="post_id" value="{{ post.slno }}" />
                                    <div class="post-footer">
                                        <div class="input-group">
                                            <input class="form-control" placeholder="Add a comment" type="text" style="border-radius: 1rem;">
                                            <span class="input-group-addon" style="font-size: 1.8rem;">
                                                <a href="#" onclick="submit_post()"><i class="fa fa-edit"></i></a>
                                            </span>
                                        </div>
                                        <ul class="comments-list">
                                            {% for comment in post.comments %}
                                                <li class="comment">
                                                    <a class="pull-left" href="#">
                                                        <img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" alt="avatar">
                                                    </a>
                                                    <div class="comment-body">
                                                        <div class="comment-heading">
                                                            <h4 class="user">{{comment.user}}</h4>
                                                            <h5 class="time">{{comment.posted_time|naturaltime}}</h5>
                                                        </div>
                                                        <p>{{comment.comments}}</p>
                                                    </div>
                                                    <ul class="comments-list">
                                                        <li class="comment">
                                                            <a class="pull-left" href="#">
                                                                <img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar">
                                                            </a>
                                                            <div class="comment-body">
                                                                <div class="comment-heading">
                                                                    <h4 class="user">Ryan Haywood</h4>
                                                                    <h5 class="time">3 minutes ago</h5>
                                                                </div>
                                                                <p>Relax my friend</p>
                                                            </div>
                                                        </li>
                                                        <li class="comment">
                                                            <a class="pull-left" href="#">
                                                                <img class="avatar" src="https://bootdey.com/img/Content/user_2.jpg" alt="avatar">
                                                            </a>
                                                            <div class="comment-body">
                                                                <div class="comment-heading">
                                                                    <h4 class="user">Gavino Free</h4>
                                                                    <h5 class="time">3 minutes ago</h5>
                                                                </div>
                                                                <p>Ok, cool.</p>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                <form>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </main>
{% endblock %}
{% block script %}
    <script type="text/javascript">
        function submit_post(){
            $('form#description-form').submit();
        }
    </script>
{% endblock %}