{% load vmo_tags %}
<div class="row">
    <div class="col-sm-6">
        <div class="col-sm-12">
             <div class="col-sm-5">
                        <label>Vendor name : </label>
             </div>
             <div class="col-sm-7">
                        {{ vendor_name }}
            </div>
        </div>

        <div class="col-sm-12">
            <div class="col-sm-5">
                        <label>Address : </label>
             </div>
             <div class="col-sm-7">
                        {{ vendor_address }}
            </div>
        </div>

        <div class="col-sm-12">
            <div class="col-sm-5">
                        <label>NDA Expiry Date : </label>
             </div>
             <div class="col-sm-7">
                        {{ vendor_nda_expiry_date|date:'d-b-Y' }}
            </div>
        </div>

        <div class="col-sm-12">
            <div class="col-sm-5">
                        <label>MSA Expiry Date : </label>
             </div>
             <div class="col-sm-7">
                        {{ vendor_msa_expiry_date|date:'d-b-Y' }}
            </div>
        </div>

        <div class="col-sm-12">
            <div class="col-sm-5">
                        <label>Performance : </label>
             </div>
             <div class="col-sm-7">
                        R/A/G
            </div>
        </div>

        <div class="col-sm-12">
            <div class="col-sm-5">
                        <label>Escalation History : </label>
             </div>
             <div class="col-sm-7">
                        Test
            </div>
        </div>

        {% if vendor_obj.certificates.all %}
            {% for cer in vendor_obj.certificates.all %}
                <div class="col-sm-12">
                    <div class="col-sm-5">
                                <label>Certificate #{{ forloop.counter }} :</label>
                     </div>
                     <div class="col-sm-7">
                                <a href="{{ cer.certificate.url }}">{{ cer.certificate|get_file_name }}</a>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>
    <div class="col-sm-6">
        <div class="col-sm-6">
                <button class="btn btn-primary" onclick="get_vendor_stats({{ vendor_id }}, 1);"
                        id="id_quarterly_button">Quarterly</button>
                <button class="btn btn-default" onclick="get_vendor_stats({{ vendor_id }}, 2);"
                        id="id_yearly_button">Yearly</button>
        </div>
        <div class="col-sm-6" style="padding:2%;">
            <div class="col-sm-6">
                <a href="#">
                    <i class="fa fa-angle-left" style="font-size:18px"></i>
                    <span style="padding:5%; font-size:15px;">Prev</span>
                </a>
            </div>
            <div class="col-sm-5">
                <a href="#">
                    <span style="padding:5%;font-size:15px;">Next</span>
                    <i class="fa fa-angle-right" style="font-size:18px"></i>
                </a>
            </div>
        </div>

        <div class="col-sm-12" id="id_stats_chart">
            {{ response|safe }}
        </div>
    </div>

</div>

<script>

    $(function () {
  	        $("#id_quarterly_button").attr('disabled', 'true');
    });

</script>