{% extends 'uibase/main/one-col-base.html.twig' %}
{% block content_header %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
{% if categories is defined and categories is not empty %}



    <script type="text/javascript">

        $(document).ready(function() {

        {% set catArray %}
             {% for category in categories %}
                 { id: {{ category.id}}, text: '{{ category.text }}' },
             {% endfor %}
        {% endset %}



        var cats = [{{ catArray }}];
        $("#categoryselect").select2({
            data: cats,
            placeholder: "Select a category",
            allowClear: true

        });
        {% if category is defined %}

        //var $selectbox = $("#categoryselect").select2();
            $("#categoryselect").select2().val("{{ category }}").trigger("change");


        {% endif %}


    });



</script>
{% endif %}

{%  if origin == 'NEW' %}
    <span class="sitefont-green">DESIGN ONLINE : CHOOSE A TEMPLATE : {{ productname|upper }}
        {% if current_cat_name is defined %}
        : {{ current_cat_name|upper }}
        {% endif %}
    <br>

        {% if origin == 'NEW' %}
            {% if categories is empty %}
                Sorry, there are no templates available for the particular size and/or folding options you have chosen.
            {% else %}
            <div>
			<select id="categoryselect" style="width:300px;">

			</select>
		{% if templatemax is defined %}
        <span class="sitefont-error-red sitefont-bold">WARNING: You already have 20 templates in your account. If you do not remove a template, your oldest template will be
            deleted when you save this new template. Templates may be removed from <a href="{{ path('cps_account_saved_designs_list') }}">Manage Account -> Manage my online designs.</a> </span>
        {% endif %}
            </div>
            {% endif %}

        </span>
        {% endif %}
        {% if origin == 'SAVED' %}

        <span class="sitefont-green">DESIGN ONLINE : CHOOSE FROM YOUR SAVED TEMPLATES
</span>
        {% endif %}
    {% endif %}

{% endblock %}
{% block content %}
        {% if templates is empty and categories is empty  %}<span>No templates to display.</span>{% endif %}
         {% if templates is empty and categories is not empty  %}<span>No templates to display, please choose a category.</span>{% endif %}
           
<table border="0" width="100%" cellpadding="2">

{% for tempaltegrp in templates|batch(2) %}
    <tr>
        {% for template in tempaltegrp %}
            <td align="center" width="50%" height="100">
            {% if origin == 'SAVED' %}
                {% for image in template.images|slice(0,2) %}
                    <img src="{{ image.thumbimg }}">
                {% endfor %}
               <div>{{ template.templatename }}<a href="{{ template.design_url }}{{ pcRespUrl }}{{ template.exrespvars }}"><img src="{{ asset('images/icons/Edit.png') }}" width="35"></a>
                <a href="{{ path('print_configure_add_artwork_designer') }}?token_id={{ template.token_id }}&ex_response_param={{ template.exrespvars }}"><img src="{{ asset('images/icons/CART-ico.png') }}"></a>
                </div>


            {%  elseif origin == 'NEW' %}

                    <a href="{{ template.design_url }}{{ pcRespUrl }}{{ template.exrespvars }}">
                    {% for image in template.images|slice(0,2) %}
                        <img src="{{ image.thumbimg }}">
                    {% endfor %}
                        <div><h3>{{ template.templatename }}</h3></div></a>

            {% endif %}


            </td>
        {% endfor %}
    </tr>
{% endfor %}

</table>
   {% if origin != 'SAVED' %}
    <script type="text/javascript">

    $('#categoryselect').on("select2:select", function(e) {
        var catid = $('#categoryselect').select2('data');
        location.href ="{{ path('print_designer_list_templates', {'product' : product, 'lid' : lid }) }}" + '/' + catid[0].id;

    });




    </script>
{% endif %}
             
{% endblock %}