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

{block name="page-title"}{intl l='Thelia System Variables'}{/block}

{block name="check-permissions"}admin.configuration.variables.view{/block}

{block name="main-content"}
<div class="variables">

    <div id="wrapper" class="container">

        <ul class="breadcrumb">
            <li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
            <li><a href="{url path='/admin/configuration'}">{intl l="Configuration"}</a></li>
            <li><a href="{url path='/admin/configuration/variables'}">{intl l="System variables"}</a></li>
        </ul>

        {module_include location='variables_top'}

        <div class="row">
            <div class="col-md-12">
                <form action="{url path='/admin/configuration/variables/update-values'}" method="post">
	                <div class="general-block-decorator">
	                    <table class="table table-striped table-condensed table-left-aligned">
	                        <caption>
	                           {intl l='Thelia system variables'}
	                           {loop type="auth" name="can_create" roles="ADMIN" permissions="admin.configuration.variables.create"}
                                <a class="btn btn-default btn-primary action-btn" title="{intl l='Add a new variable'}" href="#add_variable_dialog" data-toggle="modal">
                                    <span class="glyphicon glyphicon-plus-sign"></span>
                                </a>
                                <button class="btn btn-default btn-primary action-btn" title="{intl l='Save chages'}">{intl l='Save changes'} <span class="glyphicon glyphicon-ok"></span></button>
                            {/loop}

	                        </caption>
	                        <tr>
	                           <th>
                               {admin_sortable_header
                                  current_order=$order
                                  order='title'
                                  reverse_order='title_reverse'
                                  path={url path='/admin/configuration/variables'}
                                  label={intl l='Purpose'}
                               }
	                           </th>

                               <th>
                               {admin_sortable_header
                                  current_order=$order
                                  order='name'
                                  reverse_order='name_reverse'
                                  path={url path='/admin/configuration/variables'}
                                  label={intl l='Name'}
                               }
                               </th>

                               <th>
                               {admin_sortable_header
                                  current_order=$order
                                  order='value'
                                  reverse_order='value_reverse'
                                  path={url path='/admin/configuration/variables'}
                                  label={intl l='Value'}
                               }
                               </th>

                               {module_include location='variables_table_header'}

                               <th>&nbsp;</th>
	                        </tr>

	                        {loop name="config" type="config" hidden="0" secured="*" backend_context="1" lang="$lang_id" order="$order"}
	                            <tr>

	                               <td>{$TITLE}</td>

                                   <td>
                                   {if ! $SECURED}
                                       {loop type="auth" name="can_change" roles="ADMIN" permissions="admin.configuration.variables.change"}
                                           <a title="{intl l='Change this variable'}" href="{url path='/admin/configuration/variables/update' variable_id="$ID"}">{$NAME}</a>
                                       {/loop}
                                       {elseloop rel="can_change"}
                                           {$NAME}
                                       {/elseloop}
                                   {else}
                                       {$NAME}
                                   {/if}
                                   </td>

	                                <td>
	                                    {if $SECURED}
	                                        {$VALUE}
	                                    {else}
	                                        <input id="cancelable_edit_{$ID}" class="js-edit" data-id="{$ID}" type="text" name="variable[{$ID}]" value="{$VALUE|htmlspecialchars}" />
	                                    {/if}
	                                </td>

	                                {module_include location='variables_table_row'}

	                                <td class="actions">
	                                    {if ! $SECURED}
		                                    <div class="btn-group">
                                               <a class="btn btn-default btn-xs cancel-edit" id="cancel_edit_btn_{$ID}" data-id="{$ID}" title="{intl l='Cancel changes and revert to original value'}" href="#"><i class="glyphicon glyphicon-remove"></i></a>

                                               {loop type="auth" name="can_change" roles="ADMIN" permissions="admin.configuration.variables.change"}
                                                   <a class="btn btn-default btn-xs config-change" title="{intl l='Change this variable'}" href="{url path='/admin/configuration/variables/update' variable_id="$ID"}"><i class="glyphicon glyphicon-edit"></i></a>
                                               {/loop}

                                               {loop type="auth" name="can_delete" roles="ADMIN" permissions="admin.configuration.variables.delete"}
                                                   <a class="btn btn-default btn-xs config-delete" title="{intl l='Delete this variable'}" href="#delete_variable_dialog" data-id="{$ID}" data-toggle="modal"><i class="glyphicon glyphicon-trash"></i></a>
                                               {/loop}
		                                    </div>
		                                {else}
		                                    <i title="{intl l='This variable could not be changed.'}" class="glyphicon glyphicon-ban-circle"></i>
	                                    {/if}
	                                </td>
	                            </tr>
	                        {/loop}
	                    </table>
	                </div>
                </form>
            </div>
        </div>

        {module_include location='variables_bottom'}

    </div>
</div>


{* Adding a new variable *}

<div class="modal hide fade" id="add_variable_dialog" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>{intl l="Create a new variable"}</h3>
    </div>

    {form name="thelia.admin.config.creation"}
    <form method="POST" action="{url path='/admin/configuration/variables/create'}" {form_enctype form=$form}>

        {form_hidden_fields form=$form}

        {form_field form=$form field='success_url'}
        {* on success, redirect to the edition page, _ID_ is replaced with the created variable ID, see controller  *}
        <input type="hidden" name="{$name}" value="{url path='/admin/configuration/variables/update' variable_id='_ID_'}" />
        {/form_field}

        {* We do not allow users to create hidden or secured variables from here *}

        {form_field form=$form field='hidden'}
        <input type="hidden" name="{$name}" value="0" />
        {/form_field}

        {form_field form=$form field='secured'}
        <input type="hidden" name="{$name}" value="0" />
        {/form_field}

        <div class="modal-body">

            {if #form_error}<div class="alert alert-block alert-error" id="add_variable_dialog_error">#form_error_message</div>{/if}

            <div class="control-group">

                <label class="control-label">
                   {intl l='Name *'}
                </label>

                <div class="controls">
	                {form_field form=$form field='name'}
	                <span {if $error}class="error"{/if}>
	                   <input type="text" required="required" name="{$name}" value="{$value}" title="{intl l='Variable name'}" placeholder="{intl l='Variable name'}" class="input-block-level">
	                </span>
	                {/form_field}
                </div>
            </div>

            <div class="control-group">

                <label class="control-label">
                   {intl l='Value'}
                </label>

                <div class="controls">
                    {form_field form=$form field='value'}
                    <span {if $error}class="error"{/if}>
                       <input type="text" name="{$name}" value="{$value}" title="{intl l='Variable value'}" placeholder="{intl l='Variable value'}" class="input-block-level">
                    </span>
                    {/form_field}
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">
                   {intl l='Purpose *'}
                </label>

                <div class="controls">
                    {loop type="lang" name="default-lang" default_only="1"}

                        {* Switch edition to the current locale *}
                        <input type="hidden" name="edit_language_id" value="{$ID}" />

                        {form_field form=$form field='locale'}
                        <input type="hidden" name="{$name}" value="{$LOCALE}" />
                        {/form_field}

                        <div class="input-group input-block-level">
                            {form_field form=$form field='title'}
                            <span {if $error}class="error"{/if}>
                               <input type="text" required="required" name="{$name}" value="{$value}" title="{intl l='Variable purpose'}" placeholder="{intl l='Variable purpose'}" class="input-block-level">
                            </span>
                            {/form_field}
                            <span class="input-group-addon"><img src="{image file="assets/img/flags/{$CODE}.gif"}" alt="{intl l=$TITLE}" /></span>
                        </div>

                        <div class="help-block">{intl l="Enter here the variable purpose in the default language ($TITLE)"}</div>
                    {/loop}
                </div>
            </div>

        </div>

        <div class="modal-footer">
            <button type="submit" class="btn btn-default btn-primary">{intl l="Create this variable"}</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{intl l="Cancel"}</button>
        </div>

    </form>
    {/form}
</div>


{* Delete confirmation dialog *}

<div class="modal hide fade" id="delete_variable_dialog" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>{intl l="Delete a variable"}</h3>
    </div>

    <div class="modal-body">
        <p>{intl l="Do you really want to delete this variable ?"}</p>
    </div>

    <form method="post" action="{url path='/admin/configuration/variables/delete'}">
        <input type="hidden" name="variable_id" id="variable_delete_id" value="" />

	    <div class="modal-footer">
            <button type="submit" class="btn btn-default btn-primary">{intl l="Yes"}</button>
	        <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{intl l="No"}</button>
	    </div>
    </form>
</div>
{/block}

{block name="javascript-initialization"}
<script>
    $(function() {

    	// Set proper variable ID in delete from
    	$('a.config-delete').click(function(ev) {
    		$('#variable_delete_id').val($(this).data('id'));
     	});

        {* display the form creation dialog if it contains errors *}

        {form name="thelia.admin.config.creation"}
            {if #form_error}
                $('#add_variable_dialog').modal();
            {/if}
        {/form}

        {* Always reset create dialog on close *}

        $('#add_variable_dialog').on('hidden',function() {
            // Hide error message
            $('#add_variable_dialog_error').remove();

            // Clear error status
            $("#add_variable_dialog .error").removeClass('error');

            // Empty field values
            $("#add_variable_dialog input[type=text]").val('');
        });

    	// Edition canceling management
        $('.cancel-edit').each(function() {
            var zis   = $(this);
            var field = $('#cancelable_edit_' + $(this).data('id'));

            zis.addClass('disabled');
            zis.data('original-value', field.val());

            zis.click(function(ev) {

                if (!zis.is('.disabled')) {
                    zis.addClass('disabled');
                    field.val(zis.data('original-value'));
                }

                ev.preventDefault();
            });
        })

        $('.js-edit').keyup(function() {
            $('#cancel_edit_btn_' + $(this).data('id')).removeClass('disabled');
        });

    });
</script>
{/block}