{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right"><a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div id="marketplace-extension-info" class="container-fluid">{% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-puzzle-piece"></i> {{ name }}</h3>
      </div>
      <div class="panel-body">
        <div class="row extension-info">
          <div class="col-sm-8">{% if banner %}
            <div id="banner" class="text-center thumbnail"><img src="{{ banner }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></div>
            {% endif %}
            <div class="row thumbnails">{% for image in images %}
              <div class="col-xs-4 col-sm-2"><a href="{{ image.popup }}" class="thumbnail"><img src="{{ image.thumb }}" alt="{{ image.name }}" title="{{ image.name }}" class="img-responsive" /></a></div>
              {% endfor %} </div>
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_general }}</a></li>
              <li><a href="#tab-changelog" data-toggle="tab">{{ tab_changelog }}</a></li>
            </ul>
            <div class="tab-content">
              <div id="tab-description" class="tab-pane active">{{ description }}</div>
              <div id="tab-changelog" class="tab-pane">{{ changelog }}</div>
            </div>
          </div>
          <div class="col-sm-4">
            <div id="buy" class="well">{% if license == '1' and not purchased %}
              <a target="_blank" href="{{ extension_url }}?utm_source=ocstore_marketplace" id="button-buy" class="btn btn-success btn-lg btn-block">{{ button_purchase }}</a>
              {% endif %}
              <div id="price" class="row">
                <div class="col-xs-5"><strong>{{ text_price }}</strong></div>
                <div class="col-xs-7 text-right">{% if license %}
                  {{ price }}
                  {% else %}
                  {{ text_free }}
                  {% endif %}</div>
              </div>
              <hr>
              <ul class="list-check">
                  {% for field in cfields %}
                    <li>{{ field.name }}: {{ field.value|raw }}</li>
                  {% endfor %}
              </ul>
              <hr>
              <div class="row">
                <div class="col-xs-5"><strong>{{ text_rating }}</strong></div>
                <div class="col-xs-7 text-right">{% for i in 1..5 %}
                  {% if rating >= i %}<i class="fa fa-star"></i>{% else %}<i class="fa fa-star-o"></i>{% endif %}
                  {% endfor %} ({{ rating_total }})</div>
              </div>
              <hr>
              <div class="row">
                <div class="col-xs-5"><strong>{{ text_date_modified }}</strong></div>
                <div class="col-xs-7 text-right">{{ date_modified }}</div>
              </div>
              <hr>
              <div class="row">
                <div class="col-xs-5"><strong>{{ text_date_added }}</strong></div>
                <div class="col-xs-7 text-right">{{ date_added }}</div>
              </div>
            </div>
            <div id="sales" class="well"><i class="opencart-icon-cart-mini"></i> <strong>{{ sales }}</strong> {{ text_sales }}</div>
            <div id="sales" class="well"><i class="opencart-icon-cart-mini"></i> <strong>{{ downloaded }}</strong> {{ text_downloaded }}</div>
            <div class="well">
              <div class="media">
                <div class="media-left media-middle"><img src="{{ member_image }}" alt="{{ member_username }}" title="{{ member_username }}" class="media-object img-circle"></div>
                <div class="media-body"> <span><a target="_blank" href="{{ member_url }}">{{ member_username }}</a></span><br>
                  <small>{{ text_member_since }} {{ member_date_added }}</small></div>
              </div>
              <br />
              <a href="{{ filter_member }}" class="btn btn-primary btn-lg btn-block">{{ button_view_all }}</a> <a href="https://opencartforum.com/topic/{{ topicid }}-{{ topicseoname }}" target="_blank" class="btn btn-ghost-dark btn-lg btn-block">{{ button_get_support }}</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript"><!--
function next(url, element, i) {
	i = i + 1;

	$.ajax({
		url: url,
		dataType: 'json',
		success: function(json) {
			$('#progress-bar').css('width', (i * 20) + '%');

			if (json['error']) {
				$('#progress-bar').addClass('progress-bar-danger');
				$('#progress-text').html('<div class="text-danger">' + json['error'] + '</div>');
			}
			
			if (json['success']) {
				$('#progress-bar').addClass('progress-bar-success');
				$('#progress-text').html('<span class="text-success">' + json['success'] + '</span>');
			}
			
			if (json['text']) {
				$('#progress-text').html(json['text']);
			}

			if (json['next']) {
				next(json['next'], element, i);
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
}
//--></script> 
  <script type="text/javascript"><!--
$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled:true
		}
	});
});
//--></script> 
</div>
{{ footer }}