<li class="demo{{extra_class.next()}} {{main_flag_class}}">
    <h2 class="demo-title">
        <a href="{{ url('demos_detail', slug=submission.slug) }}"><img src="{{ submission.thumbnail_url(1) }}" alt="" width="{{thumb_width}}" height="{{thumb_height}}">{{ submission.title }}</a>
        {% if main_flag %}<strong class="flag">{{ main_flag_description }}</strong>{% endif %}
    </h2>
    <p class="byline vcard">
      {{ submission_creator(submission) }}
    </p>
    <div class="extra">
      <ul class="stats">
        {% set launches = submission.launches.total %}
        {% set launches_recent = submission.launches.recent %}
        {% set likes = submission.likes.total %}
        {% set likes_recent = submission.likes.recent %}
        {% set comments = submission.comments_total %}
        <li class="views" title="{{ ngettext('This demo has been viewed {count} time', 'This demo has been viewed {count} times', launches) | f(count=launches) }}" data-recent="{{ launches_recent }}">{{ launches }}</li>
        <li class="likes" title="{{ ngettext('{count} person liked this demo', '{count} people liked this demo', likes) | f(count=likes) }}" data-recent="{{ likes_recent }}">{{ likes }}</li>
        <li class="comments"><a href="{{ submission.get_absolute_url() }}#comments" title="{{ ngettext('There is {count} comment for this demo', 'There are {count} comments for this demo', comments) | f(count=comments) }}">{{ comments }}</a></li>
      </ul>
      <p class="desc">
        {{ submission.summary }}

        <a href="{{ url('demos_detail', slug=submission.slug) }}" class="descLink">{{ _("Details") }}</a>
      </p>
      <p class="launch"><a href="{{ url('demos_launch', slug=submission.slug) }}" target="{{ "_blank" if submission.navbar_optout }}" class="button" title="{{ _('Launch {title}') | f(title=submission.title) }}">Launch</a></p>
    </div>
</li>
