{extends file="admin-layout.tpl"}

{block name="check-resource"}admin.keyword{/block}
{block name="check-access"}view{/block}

{block name="page-title"}{intl l='View keyword associations' d='keyword'}{/block}

{block name="main-content"}
<div class="keyword view-keyword">
    <div id="wrapper" class="container">

        {loop name="keyword" type="keyword" visible="*" id="$keyword_id"}
        <ul class="breadcrumb">
            <li><a href="{url path='admin/home'}">{intl l="Home"}</a></li>
            <li><a href="{url path='admin/module/Keyword'}">{intl l="Keywords" d='keyword'}</a></li>
            {loop name="keyword_group" type="keyword_group" id="$KEYWORD_GROUP_ID"}
                <li><a title="{intl l='Browse this keyword' d='keyword'}" href="{url path='/admin/module/Keyword/group/view' keyword_group_id=$ID}">{$TITLE}</a></li>
            {/loop}
            <li class="active">{$TITLE}</li>
        </ul>

        <div class="row">

            <div class="col-md-12 general-block-decorator">
                <div class="row">
                    <div class="col-md-7 title">
                        {intl l='View keyword "%title" associations' title=$TITLE d='keyword'}
                    </div>

                    <div class="col-md-5 actions">

                        {if $HAS_PREVIOUS != 0}
                        <a href="{url path="/admin/module/Keyword/view?keyword_id=$PREVIOUS"}" class="btn btn-default" title="{intl l='View previous keyword' d='keyword'}"><span class="glyphicon glyphicon-arrow-left"></span></a>
                        {else}
                        <a href="#" disabled="disabled" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></a>
                        {/if}

                        {if $HAS_NEXT != 0}
                        <a href="{url path="/admin/module/Keyword/view?keyword_id=$NEXT"}" class="btn btn-default" title="{intl l='View next keyword' d='keyword'}"><span class="glyphicon glyphicon-arrow-right"></span></a>
                        {else}
                        <a href="#" disabled="disabled" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span></a>
                        {/if}
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-12">
                        <ul class="nav nav-tabs" id="tabbed-menu">
                            <li class="active"><a href="#folder" data-toggle="tab">{intl l="Folders association" d='keyword'}</a></li>
                            <li><a href="#content" data-toggle="tab">{intl l="Contents association" d='keyword'}</a></li>
                            <li><a href="#category" data-toggle="tab">{intl l="Categories association" d='keyword'}</a></li>
                            <li><a href="#product" data-toggle="tab">{intl l="Products association" d='keyword'}</a></li>
                        </ul>

                        <div class="tab-content">

                            <div class="tab-pane fade active in" id="folder">

                                <table class="table table-striped table-condensed" id="folder_list">
                                    <caption>
                                        {intl l="Folders"}
                                    </caption>

                                    {ifloop rel="folder_list"}
                                    <thead>
                                    <tr>
                                        <th class="object-title">{intl l='ID'}</th>

                                        <th class="object-image">&nbsp;</th>

                                        <th class="object-title">{intl l='Folder title'}</th>

                                        <th class="object-title">{intl l="Position"}</th>

                                        {module_include location='folder_list_header'}

                                        <th class="actions">{intl l='Actions'}</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {loop name="folder_list" type="keyword_folder" keyword="$CODE" visible="*" backend_context="1" lang=$lang_id}
                                    <tr>
                                        <td>{$ID}</td>

                                        <td>
                                            {loop type="image" name="folder_image" source="folder" source_id="$ID" limit="1" width="50" height="50" resize_mode="crop" backend_context="1"}
                                            <a href="{url path='admin/folders' parent=$OBJECT_ID}" title="{intl l='Browse this folder'}"><img class="img-thumbnail" src="{$IMAGE_URL}" alt="{$TITLE}" /></a>
                                            {/loop}
                                        </td>

                                        <td class="object-title">
                                            <a href="{url path='admin/folders' parent=$ID}" title="{intl l='Browse this folder'}">
                                                {$TITLE}
                                            </a>
                                        </td>

                                        <td>
                                            {admin_position_block
                                            resource="admin.keyword"
                                            access="update"
                                            path={url path='admin/module/Keyword/folder/update-position' folder_id=$ID keyword_id=$keyword_id noamp=1}
                                            url_parameter="folder_id"
                                            in_place_edit_class="keywordFolderPositionChange"
                                            position=$FOLDER_POSITION
                                            id=$ID
                                            }
                                        </td>

                                        {module_include location='folder_list_row'}

                                        <td class="actions">
                                            <div class="btn-group">
                                                <a class="btn btn-default btn-xs" title="{intl l='Browse this folder'}" href="{url path='admin/folders' parent=$ID}"><i class="glyphicon glyphicon-folder-open"></i></a>

                                                {loop type="auth" name="can_change" role="ADMIN" resource="admin.folder" access="UPDATE"}
                                                <a class="btn btn-default btn-xs" title="{intl l='Edit this folder'}" href="{url path="/admin/folders/update/{$ID}"}"><i class="glyphicon glyphicon-edit"></i></a>
                                                {/loop}

                                            </div>
                                        </td>
                                    </tr>
                                    {/loop}
                                    </tbody>
                                    {/ifloop}

                                    {elseloop rel="folder_list"}
                                    <thead>
                                    <tr>
                                        <td class="message">
                                            <div class="alert alert-info">
                                                {intl l="This keyword has no folder assocation." d='keyword'}
                                            </div>
                                        </td>
                                    </tr>
                                    </thead>
                                    {/elseloop}
                                </table>

                            </div>

                            <div class="tab-pane fade" id="content">

                                <table class="table table-striped table-condensed" id="content_list">
                                    <caption>
                                        {intl l="Contents" d='keyword'}
                                    </caption>

                                    {ifloop rel="content_list"}
                                    <thead>
                                    <tr>
                                        <th class="object-title">{intl l='ID'}</th>

                                        <th class="object-image">&nbsp;</th>

                                        <th class="object-title">{intl l='Content title'}</th>

                                        <th class="object-title">{intl l="Position"}</th>

                                        {module_include location='content_list_header'}

                                        <th class="actions">{intl l='Actions'}</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {loop name="content_list" type="keyword_content" keyword="$CODE" visible="*" backend_context="1" lang=$lang_id}
                                    <tr>
                                        <td>{$ID}</td>

                                        <td>
                                            {loop type="image" name="folder_image" source="content" source_id="$ID" limit="1" width="50" height="50" resize_mode="crop" backend_context="1"}
                                            <a href="{url path="admin/content/update/$OBJECT_ID"}" title="{intl l='Edit this content'}">
                                                <img class="img-thumbnail" src="{$IMAGE_URL}" alt="{$TITLE}" />
                                            </a>
                                            {/loop}
                                        </td>

                                        <td class="object-title"><a href="{url path="/admin/content/update/$ID"}" title="{intl l='Edit this content'}">{$TITLE}</a></td>

                                        <td>
                                            {admin_position_block
                                            resource="admin.keyword"
                                            access="update"
                                            path={url path='admin/module/Keyword/content/update-position' content_id=$ID keyword_id=$keyword_id noamp=1}
                                            url_parameter="content_id"
                                            in_place_edit_class="keywordContentPositionChange"
                                            position=$CONTENT_POSITION
                                            id=$ID
                                            }
                                        </td>

                                        {module_include location='content_list_row'}

                                        <td class="actions">
                                            <div class="btn-group">
                                                {loop type="auth" name="can_change" role="ADMIN" resource="admin.content" access="UPDATE"}
                                                <a class="btn btn-default btn-xs" title="{intl l='Edit this content'}" href="{url path="admin/content/update/$ID"}"><i class="glyphicon glyphicon-edit"></i></a>
                                                {/loop}
                                            </div>
                                        </td>
                                    </tr>
                                    {/loop}
                                    </tbody>
                                    {/ifloop}

                                    {elseloop rel="content_list"}
                                    <thead>
                                    <tr>
                                        <td class="message">
                                            <div class="alert alert-info">
                                                {intl l="This keyword has no content assocation." d='keyword'}
                                            </div>
                                        </td>
                                    </tr>
                                    </thead>
                                    {/elseloop}
                                </table>

                            </div>

                            <div class="tab-pane fade" id="category">

                                <table class="table table-striped table-condensed" id="category_list">
                                    <caption>
                                        {intl l="Categories"}
                                    </caption>

                                    {ifloop rel="category_list"}
                                    <thead>
                                    <tr>
                                        <th class="object-title">{intl l='ID'}</th>

                                        <th class="object-image">&nbsp;</th>

                                        <th class="object-title">{intl l='Category title'}</th>

                                        <th class="object-title">{intl l="Position"}</th>

                                        {module_include location='category_list_header'}

                                        <th class="actions">{intl l='Actions'}</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {loop name="category_list" type="keyword_category" keyword="$CODE" visible="*" backend_context="1" lang=$lang_id}
                                    <tr>
                                        <td>{$ID}</td>

                                        <td>
                                            {loop type="image" name="category_image" source="category" source_id="$ID" limit="1" width="50" height="50" resize_mode="crop" backend_context="1"}
                                            <a href="{url path='admin/catalog' category_id=$OBJECT_ID}" title="{intl l='Browse this category'}">
                                                <img class="img-thumbnail" src="{$IMAGE_URL}" alt="{$TITLE}" />
                                            </a>
                                            {/loop}
                                        </td>

                                        <td class="object-title">
                                            <a href="{url path='admin/catalog' category_id=$ID}" title="{intl l='Browse this category'}">
                                                {$TITLE}
                                            </a>
                                        </td>

                                        <td>
                                            {admin_position_block
                                            resource="admin.keyword"
                                            access="update"
                                            path={url path='admin/module/Keyword/category/update-position' category_id=$ID keyword_id=$keyword_id noamp=1}
                                            url_parameter="category_id"
                                            in_place_edit_class="keywordCategoryPositionChange"
                                            position=$CATEGORY_POSITION
                                            id=$ID
                                            }
                                        </td>

                                        {module_include location='category_list_row'}

                                        <td class="actions">
                                            <div class="btn-group">
                                                <a class="btn btn-default btn-xs" title="{intl l='Browse this category'}" href="{url path='admin/catalog' category_id=$ID}"><i class="glyphicon glyphicon-folder-open"></i></a>

                                                {loop type="auth" name="can_change" role="ADMIN" resource="admin.category" access="UPDATE"}
                                                <a class="btn btn-default btn-xs" title="{intl l='Edit this category'}" href="{url path="/admin/categories/update" category_id=$ID}"><i class="glyphicon glyphicon-edit"></i></a>
                                                {/loop}

                                            </div>
                                        </td>
                                    </tr>
                                    {/loop}
                                    </tbody>
                                    {/ifloop}

                                    {elseloop rel="category_list"}
                                    <thead>
                                    <tr>
                                        <td class="message">
                                            <div class="alert alert-info">
                                                {intl l="This keyword has no category assocation." d='keyword'}
                                            </div>
                                        </td>
                                    </tr>
                                    </thead>
                                    {/elseloop}
                                </table>

                            </div>

                            <div class="tab-pane fade" id="product">

                                <table class="table table-striped table-condensed" id="product_list">
                                    <caption>
                                        {intl l="Products"}
                                    </caption>

                                    {ifloop rel="product_list"}
                                    <thead>
                                    <tr>
                                        <th class="object-title">{intl l='ID'}</th>

                                        <th class="object-image">&nbsp;</th>

                                        <th class="object-title">{intl l='Product title'}</th>

                                        <th class="object-title">{intl l="Position"}</th>

                                        {module_include location='product_list_header'}

                                        <th class="actions">{intl l='Actions'}</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    {loop name="product_list" type="keyword_product" keyword="$CODE" association_order="manual" visible="*" backend_context="1" lang=$lang_id}
                                    <tr>
                                        <td>{$ID}</td>

                                        <td>
                                            {loop type="image" name="product_image" source="product" source_id="$ID" limit="1" width="50" height="50" resize_mode="crop" backend_context="1"}
                                            <a href="{url path="admin/products/update" product_id=$OBJECT_ID}" title="{intl l='Edit this product'}">
                                                <img class="img-thumbnail" src="{$IMAGE_URL}" alt="{$TITLE}" />
                                            </a>
                                            {/loop}
                                        </td>

                                        <td class="object-title"><a href="{url path="/admin/products/update" product_id=$ID}" title="{intl l='Edit this product'}">{$TITLE}</a></td>

                                        <td>
                                            {admin_position_block
                                            resource="admin.keyword"
                                            access="update"
                                            path={url path='admin/module/Keyword/product/update-position' product_id=$ID keyword_id=$keyword_id noamp=1}
                                            url_parameter="product_id"
                                            in_place_edit_class="keywordProductPositionChange"
                                            position=$PRODUCT_POSITION
                                            id=$ID
                                            }
                                        </td>

                                        {module_include location='product_list_row'}

                                        <td class="actions">
                                            <div class="btn-group">
                                                {loop type="auth" name="can_change" role="ADMIN" resource="admin.product" access="UPDATE"}
                                                <a class="btn btn-default btn-xs" title="{intl l='Edit this product'}" href="{url path="admin/products/update" product_id=$ID}"><i class="glyphicon glyphicon-edit"></i></a>
                                                {/loop}
                                            </div>
                                        </td>
                                    </tr>
                                    {/loop}
                                    </tbody>
                                    {/ifloop}

                                    {elseloop rel="product_list"}
                                    <thead>
                                    <tr>
                                        <td class="message">
                                            <div class="alert alert-info">
                                                {intl l="This keyword has no product assocation." d='keyword'}
                                            </div>
                                        </td>
                                    </tr>
                                    </thead>
                                    {/elseloop}
                                </table>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>
        {/loop}
    </div>
</div>
{/block}

{block name="javascript-initialization"}

    {javascripts file='assets/js/bootstrap-editable/bootstrap-editable.js'}
        <script src="{$asset_url}"></script>
    {/javascripts}

    <script>
        $(function() {

            {if $smarty.get.tab}
                $('#tabbed-menu a[href="#{$smarty.get.tab}"]').tab('show');
            {/if}

            {* Inline editing of object position using bootstrap-editable *}

            $('.keywordFolderPositionChange, .keywordContentPositionChange, .keywordCategoryPositionChange, .keywordProductPositionChange').attr('data-keyword', "{$keyword_id}");

            doEditable($('.keywordFolderPositionChange'), 'folder');
            doEditable($('.keywordContentPositionChange'), 'content');
            doEditable($('.keywordCategoryPositionChange'), 'category');
            doEditable($('.keywordProductPositionChange'), 'product');

            function doEditable($elem, object) {
                $elem.editable({
                    type        : 'text',
                    title       : '{intl l="Enter new ' + object + ' position" d="keyword"}',
                    mode        : 'popup',
                    inputclass  : 'input-mini',
                    placement   : 'left',
                    success     : function(response, newValue) {

                        // The URL template
                        var url = '';
                        if (object == 'folder') {
                            url = "{url path='/admin/module/Keyword/" + object + "/update-position' keyword_id='__KEYWORD_ID__' folder_id='__ID__' position='__POS__' noamp=1}";
                        }
                        if (object == 'content') {
                            url = "{url path='/admin/module/Keyword/" + object + "/update-position' keyword_id='__KEYWORD_ID__' content_id='__ID__' position='__POS__' noamp=1}";
                        }
                        if (object == 'category') {
                            url = "{url path='/admin/module/Keyword/" + object + "/update-position' keyword_id='__KEYWORD_ID__' category_id='__ID__' position='__POS__' noamp=1}";
                        }
                        if (object == 'product') {
                            url = "{url path='/admin/module/Keyword/" + object + "/update-position' keyword_id='__KEYWORD_ID__' prod='__ID__' position='__POS__' noamp=1}";
                        }


                        // Perform subtitutions
                        url = url.replace('__KEYWORD_ID__', $(this).data('keyword'))
                                .replace('__ID__', $(this).data('id'))
                                .replace('__POS__', newValue);

                        // Reload the page
                        location.href = url;
                    }
                });
            }

        });
    </script>
{/block}