{*

A generic image upload form

Parameters:
    imageType       = Image type (category, product, folder, content, module)
    parentId        = Image parent id, ex: category id
    resource        = Image parent resource name

*}
{* Set the default translation domain, that will be used by {intl} when the 'd' parameter is not set *}
{default_translation_domain domain='bo.default'}

{ifloop rel="image"}
    <ul id="js-sort-image" class="row list-unstyled">
        {loop type="image" name="image" backend_context="on" lang="$edit_language_id" source=$imageType order="manual" source_id=$parentId width="200" height="100" resize_mode="borders" visible="*"}

        <li class="col-sm-6 col-md-3 ui-state-default" data-sort-id="{$ID}">

                <div class="thumbnail-container">
                    <a href="{url path="/admin/image/type/%image/%id/update" image=$imageType id=$ID}" title="{intl l='Update this image'}" class="thumbnail">
                        {if $PROCESSING_ERROR}
                            <img src="//placehold.it/200x100&text={intl l='Image+file+not+found'}" alt="{$TITLE}">
                        {else}
                            <img src="{$IMAGE_URL nofilter}" alt="{$TITLE}">
                        {/if}
                    </a>

                    <div class="container-btn-left btn-group">
                        <input class="form-control image-select-checkbox" type="checkbox" data-id="image-{$ID}"/>
                    </div>

                    <div class="container-btn-right btn-group" >
                        <a class="image-update-btn btn btn-default btn-xs disabled js-sorted-position" href="#">{$POSITION}</a>

                        {loop type="auth" name="can_change" role="ADMIN" resource="{$resource|default:"admin.$imageType"}" access="UPDATE"}
                        <a class="image-toggle-btn btn btn-default btn-xs {if $VISIBLE}visibility-visible{/if}" href="{url path="/admin/image/type/%image/%id/toggle" image=$imageType id=$ID}" data-error-message="{intl l='Please retry'}">
                            <i class="glyphicon glyphicon-eye-open"></i><i class="glyphicon glyphicon-eye-close"></i>
                        </a>
                        <a class="image-update-btn btn btn-default btn-xs" href="{url path="/admin/image/type/%image/%id/update" image=$imageType id=$ID}" data-error-message="{intl l='Please retry'}">
                            <i class="glyphicon glyphicon-edit"></i>
                        </a>
                        {/loop}
                        {elseloop rel="can_change"}
                        <a class="btn btn-default btn-xs">
                            <i class="glyphicon {if $VISIBLE}glyphicon-eye-open{else}glyphicon-eye-close{/if}"></i>
                        </a>
                        {/elseloop}

                        {loop type="auth" name="can_delete" role="ADMIN" resource="{$resource|default:"admin.$imageType"}" access="DELETE"}
                        <a class="image-delete-btn btn btn-default btn-xs" id="image-{$ID}" href="{url path="/admin/image/type/%image/delete/%id" image=$imageType id=$ID}" data-error-message="{intl l='Please retry'}">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>
                        {/loop}
                    </div>
                </div>

                {if !$successUrl}
                    {$successUrl = {navigate to="current"}}
                {/if}
                <form method="POST" action="{url path="/admin/image/type/%image/%id/update-title" image=$imageType id=$ID}" class="clearfix">
                    <input type="hidden" name="success_url" value="{$successUrl}"/>
                    <input type="hidden" name="locale" value="{$edit_language_locale}"/>

                    <div class="input-group">
                        <input type="text" name="title" class="form-control" placeholder="{intl l='Title'}" value="{$TITLE}">

                        <span class="input-group-btn">
                            <button type="submit" name="save_mode" value="stay" class="form-submit-button btn btn-default btn-success" title="{intl l='Save'}">
                                <span class="glyphicon glyphicon-ok"></span>
                            </button>
                        </span>
                    </div>
                </form>

            </li>
        {/loop}
    </ul>
{/ifloop}
{elseloop rel="image"}
<div class="alert alert-info">{intl l='There is no images attached to this %type.' type={$imageType}}</div>
{/elseloop}