{% if suggestions|length > 0 %}
    {% for suggestion in suggestions %}
<div>
        <div>

<br>
            <img style="width:100px;display:inline-block;vertical-align:top;" src="{{ suggestion.thumb }}" />
            <div style="display:inline-block;">

                <ul style="padding-left:8px;">
                    <li style="color:black;">{{ suggestion.title }}</li>
                    <li style="font-weight:normal;">{{ suggestion.description }}</li>
                    <li style="font-weight:normal;font-size:10px;"><img style="width:16px;height:16px;" src="{{ image_path }}genius.png"/><span style="color:#428bca;top: -2px;position: relative;">replayScore&#153;</span> <b>{{ suggestion.overall_replay_score }}x</b></li>
                    <li>{{ suggestion.time_ago }}</li>
                </ul>
            </div>
        </div>

<div style="color:black;cursor:pointer;font-size:11px;font-weight:bold;" id="stats_listeners_toggle">View Top Listeners ({{ suggestion.listeners|length }})</div>
        {% if suggestion.listeners|length > 0 %}
            <div style="height:300px;overflow-y:scroll;">
            <table class="hide" style="margin-left:auto;margin-right:auto;height:300px;" id="stats_listeners_content">
                <tr style="font-size:10px;">
                    <th style="text-align:center;width:100px">Listener</th>
                    <th style="text-align:center;width:100px">Play Time ({{ suggestion.song_duration  }})</th>
                    <th style="text-align:center;width:100px">Last Played</th>
                    <th style="text-align:center;width:100px">Genius Score</th>
                </tr>

            {% for listener in suggestion.listeners %}
<tr style="font-size:10px;">
    <td style="text-align:center;padding: 10px;"><img style="width:30px;height:30px;" src="{{ listener.avatar }}"/><div style="font-size: 10px;color: black;padding: 5px;">{{ listener.name }}</div></td>
    <td style="text-align:center;padding: 10px;">{{ listener.play_time }}</td>
    <td style="text-align:center;padding: 10px;">{{ listener.play_time_ago }}</td>
    <td style="text-align:center;padding: 10px;">{{ listener.replay_score }}</td>
</tr>
            {% endfor %}

            </table>
                {% if suggestion.approved == 0 %}
                    <span>Position:{{ suggestion.position }}</span>
                    <span>Status: Auditioning in</span>

                    {% if suggestion.group_id == 0 %}
                        <span>General</span>
                    {% else %}
                        <span>{{ suggestion.group_name }}</span>
                    {% endif %}

                {%  else %}
                    <span>Position:{{ suggestion.position }}</span>
                    <span>Status: Approved in</span>
                    {% if suggestion.group_id == 0 %}
                        <span>General</span>
                    {% else %}
                        <span>{{ suggestion.group_name }}</span>
                    {% endif %}
                {% endif %}
            </div>
            {% else %}
                <div style="text-align:center;" class="hide" id="stats_listeners_content">No one has listened to this suggestion yet. Start by telling your friends about it!</div>
        {% endif %}




</div>
    {% endfor %}
{% else %}
    <div>
        Your suggestions and there performance are shown on this screen. You have not made any suggestions yet. Start making suggestions to view your performance here.
    </div>
{% endif %}