{% extends "base.html" %}
{% load static %}

{% block content %}
<br>
<div class="jumbotron text-center">
  <div class="container" style="margin-bottom:10px">
    <img class="img-responsive" src="{% static 'gg_logo_1.png'%}" style="display:inline;">
    <h1>Top 5 Model Guesses</h1>
 </div>
 <div class="container">
        <div class="col-sm-8">
            <img class="img-responsive center-block" src="{{img_src}}" style="height:440px">
            <h2>Actual: {{actual_label}}</h2>
        </div>
        <div class="col-sm-4">
            <table>
                <tbody class="text-left" style="font-size: 2.5rem; font-weight: bold">
                    <tr style="height:80px">
                        <!-- <td style="padding-right:10px; color: {{color_labels.0}}"> &nbsp1. </td> -->
                        <td style="color: {{color_labels.0}}">1. {{top_guesses.0}}</td>
                        <!-- <td style="padding-right:10px; color: {{color_labels.5}}"> &nbsp6. </td>
                        <td style="color: {{color_labels.5}}">{{top_guesses.5}}</td> -->
                    </tr>
                    <tr style="height:80px">
                        <!-- <td style="padding-right:10px; color: {{color_labels.1}}"> &nbsp2. </td> -->
                        <td style="color: {{color_labels.1}}">2. {{top_guesses.1}}</td>
                        <!-- <td style="padding-right:10px; color: {{color_labels.6}}"> &nbsp7. </td>
                        <td style="color: {{color_labels.6}}">{{top_guesses.6}}</td> -->
                    </tr>
                    <tr style="height:80px">
                        <!-- <td style="padding-right:10px; color: {{color_labels.2}}"> &nbsp3. </td> -->
                        <td style="color: {{color_labels.2}}">3. {{top_guesses.2}}</td>
                        <!-- <td style="padding-right:10px; color: {{color_labels.7}}"> &nbsp8. </td>
                        <td style="color: {{color_labels.7}}">{{top_guesses.7}}</td> -->
                    </tr>
                    <tr style="height:80px">
                        <!-- <td style="padding-right:10px; color: {{color_labels.3}}"> &nbsp4. </td> -->
                        <td style="color: {{color_labels.3}}">4. {{top_guesses.3}}</td>
                        <!-- <td style="padding-right:10px; color: {{color_labels.8}}"> &nbsp9. </td>
                        <td style="color: {{color_labels.8}}">{{top_guesses.8}}</td> -->
                    </tr>
                    <tr style="height:80px">
                        <!-- <td style="padding-right:10px; color: {{color_labels.4}}"> &nbsp5. </td> -->
                        <td style="color: {{color_labels.4}}">5. {{top_guesses.4}}</td>
                        <!-- <td style="padding-right:10px; color: {{color_labels.9}}">10. </td>
                        <td style="color: {{color_labels.9}}">{{top_guesses.9}}</td> -->
                    </tr>
                </tbody>
            </table>
            </div>
        
    </div>
</div>
{% endblock %}