{{ content_top }}
<div class="row">

	<div class="col-md-12">
		{% if extensions %}
		<div class="text-center">
			<h1>Hooray! You've made it</h1>
			<h3>Now click the magic wand button and see how easy it is to install extensions!</h3>
			
			<br/>
			<div class="row row-clear" style="max-width:1200px; display:inline-block">
				
					{% for extension in extensions %}
						<div class="col-md-3 col-sm-6">
							{% include 'extension/d_shopunity/extension_thumb.twig' %}
						</div>
					{% endfor %}
				
			</div>
			<p>You can install more awesome extensions in the market section both free and commercial. Enjoy!</p>
			<a href="{{href_market}}" class="btn btn-primary btn-lg">Search for more extensions</a>
			<br/>
			<br/>
		</div>
		{% endif %}

		<div class="ibox">
			<div class="ibox-title">
				<h4>Search for extensions</h4>
				<p>
					<input type="text" class="form-control fuzzy-search" placeholder="Search for...">
				</p>
			</div>
		</div>
		{{ developer_generate_module }}

		<div  id="list_search_1" class="ibox">
			{% if store_extensions %}
			<div class="ibox-title">
				<h4>Your Licenses.</h4>
				<p>These modules have been purchased. You can use them only for this webshop.</p>
			</div>
			<div class="ibox-content p-n">
				<ul class="list list-unstyled">
					{% for extension in store_extensions %}
					<li>
						{% include 'extension/d_shopunity/extension_thumb_row.twig' with extension %}
					</li>
					{% endfor %}
				</ul>
			</div>
			{% endif %}
		</div>

		<div  id="list_search_2" class="ibox">
			{% if local_extensions %}
			<div class="ibox-title">
				<h4>No licenses (free or expired).</h4>
				<p>These modules do not have a license, or their lisence has expired. </p>
			</div>
			<div class="ibox-content p-n">
				<ul class="list list-unstyled">
					{% for extension in local_extensions %}
					<li>
						{% include 'extension/d_shopunity/extension_thumb_row.twig' with extension %}
					</li>
					{% endfor %}
				</ul>
			</div>
			{% endif %}
		</div>

        <div id="list_search_3" class="ibox">
            {% if unregestered_extensions %}
            <div class="ibox-title">
                <h4>Unknown Modules.</h4>
                <p>These modules are not regestered with the shopunity network.</p>
            </div>
            <div class="ibox-content p-n">
                <ul class="list list-unstyled">
                    {% for extension in unregestered_extensions %}
                    <li>
                        {% include 'extension/d_shopunity/extension_thumb_row.twig' with extension %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </div>

		<div id="list_search_4" class="ibox">
			{% if library_extensions_count %}
			<div class="ibox-title">
				<h4>Libraries.</h4>
				<p>Libraries are sets of files used by modules. They do not have an admin or do not need your personal action. You may think of libraries as bricks used to build modules.</p>
			</div>
			<div class="ibox-content p-n load-libraries-here">
                <div class="p-m text-center">
                    <a class="btn btn-info bnt-lg load-libraries"><i class="fa fa-refresh hide fa-spin"></i> View libraries ({{library_extensions_count}})</a>
                </div>
			</div>
			{% endif %}
		</div>

	</div>
</div>
<script>

	var options = {
	  valueNames: [ 'name' ],
	  plugins: [ ListFuzzySearch() ]
	};

	if($('#list_search_1 ul').length){
		var userList1 = new List('list_search_1', options);
		$('.fuzzy-search').on("keyup",function(){
	        userList1.search($(this).val());
	    });
	}
	if($('#list_search_2 ul').length){
		var userList2 = new List('list_search_2', options);
		$('.fuzzy-search').on("keyup",function(){
	        userList2.search($(this).val());
	    });
	}
	if($('#list_search_3 ul').length){
		var userList3 = new List('list_search_3', options);
		$('.fuzzy-search').on("keyup",function(){
	        userList3.search($(this).val());
	    });
	}
    

    
    $('body').on('click', '.load-libraries', function(){
        $.ajax( {
            url: '{{load_libraries}}',
            type: 'get',
            dataType: 'html',

            beforeSend: function() {
                $('.load-libraries').find('.fa-refresh').removeClass('hide');
            },

            complete: function() {
                $('.load-libraries').find('.fa-refresh').addClass('hide');
            },

            success: function(html) {
                $('.load-libraries-here').html(html);
                if($('#list_search_4 ul').length){
                    var userList4 = new List('list_search_4', options);
                    $('.fuzzy-search').on("keyup",function(){
                        userList4.search($(this).val());
                    });
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    });

</script>
{{content_bottom}}