{% extends "layout.html" %}
{% block content %}

<style type="text/css">

.rating {
    border: none;
    margin-right: calc(100% - 225px);
}

.myratings {
    color: green
}

.rating>[id^="star"] {
    display: none
}

.rating>label:before {
    margin: 5px;
    font-size: 2.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005"
}

.rating>.half:before {
    content: "\f089";
    position: absolute
}

.rating>label {
    color: #ddd;
    float: right
}

.rating>[id^="star"]:checked~label,
.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
    color: #FFD700
}

.rating>[id^="star"]:checked+label:hover,
.rating>[id^="star"]:checked~label:hover,
.rating>label:hover~[id^="star"]:checked~label,
.rating>[id^="star"]:checked~label:hover~label {
    color: #FFED85
}
</style>

<section class="section lb m3rem">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="page-wrapper">
                    <div class="blog-title-area">
                        <ol class="breadcrumb hidden-xs-down">
                            <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ url_for('allposts') }}" >All Blog</a></li>
                            <li class="breadcrumb-item active">{{ post.title }}</li>
                        </ol>

                        <!-- <span class="color-yellow"><a href="marketing-category.html" title="">Lifestyle</a></span> -->

                        <h3>{{ post.title }}</h3>

                        <div class="blog-meta big-meta">
                            <small><a href="marketing-single.html" title="">{{ post.date }}</a></small>
                            <small><a href="blog-author.html" title="">by {{ post.user.username }}</a></small>
                            <!-- <small><a href="#" title=""><i class="fa fa-eye"></i> 2344</a></small> -->
                        </div><!-- end meta -->

                        <!-- <div class="post-sharing">
                            <ul class="list-inline">
                                <li><a href="#" class="fb-button btn btn-primary"><i class="fa fa-facebook"></i> <span class="down-mobile">Share on Facebook</span></a></li>
                                <li><a href="#" class="tw-button btn btn-primary"><i class="fa fa-twitter"></i> <span class="down-mobile">Tweet on Twitter</span></a></li>
                                <li><a href="#" class="gp-button btn btn-primary"><i class="fa fa-google-plus"></i></a></li>
                            </ul>
                        </div> -->
                    </div><!-- end title -->

                    <div class="single-post-media">
                        <img src="upload/market_blog_06.jpg" alt="" class="img-fluid">
                    </div><!-- end media -->

                    <div class="blog-content">  
                        {% autoescape false %}
                        {{ post.content }}
                        {% endautoescape %}

                        <div id="post_id" style="display: none">
                        {{post.id}}
                        </div>
                    </div><!-- end content -->


                    <hr class="invis1">

                    <div class="custombox clearfix">
                        <h4 class="small-title">Do you like this post?</h4>
                        <fieldset class="rating">
                            <script type="text/javascript">
                                function updateStars(rate) {
                                    console.log(rate);
                                    console.log($("#post_id").text().trim());
                                    $.ajax({
                                        url : '/ratepost/'+$("#post_id").text().trim()+'?rate='+rate,
                                        type : 'GET',
                                        success : function(rs){
                                            console.log(rs)
                                        },
                                        error : function(error) {
                                            console.log(error)
                                            // $(".myratings").html("Please login to rate")
                                            window.location.href = "/login";
                                        }
                                    });
                                }
                            </script>
                            {% for rIndex in range(5,0,-1) %}
                                {% if rate <= rIndex : %}
                                    <input type="radio" id="star{{rIndex}}" name="rating" value="{{rIndex}}" onchange="updateStars('{{rIndex}}')" checked />
                                    <label class="full" for="star{{rIndex}}" title="{{rIndex}} stars"></label> 
                                {% else %}
                                  <input type="radio" id="star{{rIndex}}" name="rating" value="{{rIndex}}" onchange="updateStars('{{rIndex}}')" />
                                    <label class="full" for="star{{rIndex}}" title="{{rIndex}} stars"></label> 
                                {% endif %}
                            {% endfor %}
                        </fieldset>
            
                    </div><!-- end custom-box -->

                    <hr class="invis1">

                    <hr class="invis1">

                    <div class="custombox clearfix">
                        <h4 class="small-title">Comments</h4>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="comments-list">
                                    {% for comment in comments %}

                                        <div class="media">
                                            <div class="media-body">
                                                <h4 class="media-heading user_name">{{comment.user.username}} <small>{{comment.date}}</small></h4>
                                                <p>{{comment.content}}</p>
                                                <a href="#leaveReply" class="btn btn-primary btn-sm">Reply</a>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div><!-- end col -->
                        </div><!-- end row -->
                    </div><!-- end custom-box -->

                    <hr class="invis1">

                    <div class="custombox clearfix">
                        <h4 class="small-title" id="leaveReply">Leave a Reply</h4>
                        <div class="row">
                            <div class="col-lg-12">

                            <form method="post" class="form-wrapper" action="{{ url_for('post_comment', post_id=post.id) }}">
                                                    {{ form.hidden_tag() }}

                                        <!-- <textarea name="comment" id="comment" cols="25" rows="10"></textarea> -->
                                        {{ form.comment(class_="form-control") }} 

                                        {{ form.submit(class_="btn btn-primary") }}
                                        {% for error in form.comment.errors %}<span style="color: red;">[{{ error }}]</span>
                                        {% endfor %}
                                      </div>
                                    </form>

                            </div>
                        </div>
                    </div>
                </div><!-- end page-wrapper -->
            </div><!-- end col -->

        </div><!-- end row -->
    </div><!-- end container -->
</section>

<div class="dmtop">Scroll to Top</div>

</div><!-- end wrapper -->

{% endblock content %}