<div class="extension-thumb" id="extension_thumb_{{ extension.codename }}">
    <div class="ibox shadow-35">
        <div class="loading">
            <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
        </div>
        <a href="{{ extension.url }}">
           <img class="img-responsive" src="{{ extension.processed_images[1].url }}" alt="" />
        </a>
        <div class="ibox-content clearfix">
            <div class="caption">
                <h4 class="name">
                    {{ extension.name }}
                </h4>
                <p class="info">
                    <span class="version label label-info">v{{ extension.version }}</span>
                    {% if extension.installed and extension.store_extension and not extension.store_extension.status %}
                        <span class="version label label-danger" data-toggle="tooltip" data-original-title="This extension is installed, yet you do not have an order or the invoice is not paid.">Unpaid</span>
                    {% endif %}
                </p>

                {% if extension.part_of_pack %}
                    <p class="info">Part of pack</p>
                {% endif %}

                <div class="pull-right">
                    {% if extension.installable and not extension.installed %}
                        <!-- install -->
                        <a class="btn btn-success btn-sm popup-extension" data-href="{{ extension.popup }}&theme=extension_thumb"  data-toggle="tooltip" data-original-title="Install"><span class="fa fa-magic"></span></a>
                    {% endif %}
                    
                    {% if extension.updatable and extension.installed %}
                        <!-- update -->
                        <a class="btn btn-success btn-sm popup-extension" data-href="{{ extension.popup }}&theme=extension_thumb&action=update"  data-toggle="tooltip" data-original-title="Update"><span class="fa fa-refresh"></span></a>
                    {% endif %}
                    
                   
                    {% if extension.purchasable %}
                        <!-- purchase -->
                        <div class=" btn-group form-inline">
                            {% if extension.price %}
                             <select class="form-control input-sm">
                                {% for price in extension.prices %}
                                    <option value="{{ price.extension_recurring_price_id }}">{{ price.recurring_price_format }} / {{ price.recurring_duration }} days</option>
                                {% endfor %}
                            </select>
                            {% endif %}
                            <a class="btn btn-primary btn-sm pull-right popup-purchase"  data-href="{{ extension.popup_purchase }}&theme=extension_thumb" data-extension-id="{{ extension.extension_id }}">Get it</a>
                        </div>
                    {% endif %}

                    {% if extension.installed %}
                        <!-- delete -->
                        <a class="btn btn-danger btn-sm show-loading delete-extension" data-href="{{ extension.uninstall }}&theme=extension_thumb"  data-toggle="tooltip" data-original-title="Delete"><span class="fa fa-trash-o"></span></a>  
                    {% endif %}

                    {% if extension.suspendable and not extension.installed %}
                        <!-- suspend -->
                        <a class="btn btn-danger btn-sm show-loading suspend-extension" data-href="{{ extension.suspend }}&theme=extension_thumb" data-toggle="tooltip" data-original-title="Suspend"><span class="fa fa-ban"></span></a>
                    {% endif %}
                    
                    {% if extension.activate %}
                        <!-- activate -->
                        <a class="btn btn-success btn-sm activate-extension hide" data-href="{{ extension.activate }}"  data-toggle="tooltip" data-original-title="Activate"><span class="fa fa-power-off "></span></a>
                    {% endif %}

                    {% if extension.deactivate %}
                        <!-- deactivate -->
                        <a class="btn btn-danger btn-sm deactivate-extension hide" data-href="{{ extension.deactivate }}"  data-toggle="tooltip" data-original-title="Deactivate"><span class="fa fa-power-off "></span></a>
                    {% endif %}
                    
                    {% if extension.commercial and not extension.purchasable and not extension.installable %}
                        <!-- pay invoice -->
                        <a class="btn btn-danger btn-sm btn-sm" href="{{ extension.billing }}" data-toggle="tooltip" data-original-title="Billing">Pay invoice</a>
                    {% endif %}
                </div>


            </div>
        </div>
        <div class="ibox-footer clearfix hide">
            <div class="rating">
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
                <span class="fa fa-star"></span>
            </div>
            <div class="reviews"><span class="fa fa-comments"></span> 342</div>
            <div class="downloads"><span class="fa fa-cloud-download"></span> 34</div>
        </div>
    </div>
</div>