{% extends "base.html" %}
{% block content %}
<script>
    function rating(is_positve)
    {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", "/rating/{{ title }}/"+is_positve, false ); // false for synchronous request
        xmlHttp.send( null );
        window.location.reload();
    }
</script>

<div class="container">
    <div class="row">
        <div class="col text-center mt-3">
            <h2>{{ title }}</h2>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="container pb-5">
                <div class="row text-center">
                    <div class="col">
                        {% if previous %}
                        <button onclick="window.open('/topic/{{ category_title }}/{{ previous.title }}/', '_self')" type="button" class="btn btn-outline-success">Previous</button>
                        {% endif %}
                    </div>
                    <div class="col">
                        <button onclick="window.open('/category/{{ category_title }}/', '_self')" type="button" class="btn btn-outline-primary">Back To Category</button>
                    </div>
                    <div class="col">
                        {% if next %}
                        <button onclick="window.open('/topic/{{ category_title }}/{{ next.title }}/', '_self')" type="button" class="btn btn-outline-success">Next</button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            
        </div>

        <div class="col col-10">
            <pre><code  style="padding-top: 5px; padding-bottom: 5px; font-size: 18pt;"class="border border-secondary language-{{category_title}}">{{code}}</code></pre>

            {% if output %}
            <pre><code  style="padding-top: 5px; padding-bottom: 5px;font-size: 15pt"class="language-python">#Output: {{output}}</code></pre>
            {% endif %}
    
            {% if version %}
            <small class="text-muted">tested in version: {{version}}</small>
            {% endif %}
        </div>

        <div class="col">

        </div>
    </div>
    <div class="row text-center">
        <div class="col"></div>
        <div class="col">
            <button onclick="rating(0)" type="button" class="btn btn-outline-danger" >Not Helpful</button><br>
            <small class="text-danger">{{ notHelpful_count }}</small>
        </div>
        <div class="col">
            <button onclick="rating(1)" type="button" class=" btn btn-outline-success" >Helpful</button><br>
            <small class="text-success">{{ helpful_count }}</small>
        </div>
        <div class="col">

        </div>
    </div>

    <div class="row">
        <div class="col">

        </div>
        
        <div class="col col-10 pt-5 text-center" style="letter-spacing: 1.5px">
			<h4>Read More</h4>
			<p>
				{{ read_more | safe }}
			</p>
        </div>
        <div class="col">

        </div>
    </div>
</div>


{% endblock content %}