{include file="./index_top.tpl"}
<style>
    .new-action-button {
        box-shadow: inset 0 -18px 20px rgba(0,0,0,0.08);
        border: 1px solid rgba(0,0,0,0.25);
    }
    
    .new-action-button:hover {
        box-shadow: inset 0 -22px 30px rgba(0,0,0,0.16);
    }
    input[type=radio] {
        margin: 3px;
    }
</style>
<div align=center><br>{if $bgroup_id eq -1}{$lang.Create_bgroup}{else}{$lang.Edit_bgroup} "{$name}"{/if}<br><br></div>
<form action="edit_bgroup.php" method="post">
    <table align="center" border=0 cellpadding=3 cellspacing=0>
        <tr>
            <td align=right>{$lang.Name2}:</td>
            <td><input class="form-control form-control-250" type=text name="name" id="name" value="{$name}" size="50" maxlenght="100"></td>
        </tr>
        <tr>
            <td align=right>{$lang.Color_mode}<span class='help_bt' h_id='Color_mode'></span>:</td>
            <td>
                <table>
                    <tr>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" id="color_mode1" onchange="color_moding();" name="color_mode" value=0 {if !$color_mode}checked{/if}>{$lang.Standart}
                            </label>
                            <label class="radio-inline">
                                <input type="radio" id="color_mode2" onchange="color_moding();" name="color_mode" value=1 {if $color_mode}checked{/if}>{$lang.Paint}
                            </label>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr id="old_mode" {if $color_mode}style="display: none;"{/if}>
            <td align=right>{$lang.Button_color}<span class='help_bt' h_id='Button_color'></span>:</td>
            <td>
                <table>
                    <tr>
                        <td><select class="form-control form-control-160" name="old_color"
                                    onchange="change_color(this.value);">{$sel_color}</select>
                        </td>
                        <td>
                            <button id="color_demo" type="button" style="height:30px; width:200px; margin:0 0 0 15px; border: 1px solid rgba(0,0,0,0.25); background: {if !$color_mode}{$color}{/if}"
                                    class="new-action-button action-btns__item action-btns__itemm action-btns__item--bottom default-btn user-data__addit-act">
                            </button>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr id="new_mode1" {if !$color_mode}style="display: none;"{/if}>
            <td align=right>{$lang.Background_color}<span class='help_bt' h_id='Button_background_color'></span>:</td>
            <td>
                <table>
                    <tr>
                        <td>
                            <input type="hidden" id='input_color' name='new_color' value='{if $color}{$color|htmlspecialchars}{else}#ededed{/if}'>
                            <input type="text" class="colorSelector" id="color" value="{if $color}{$color|htmlspecialchars}{else}#ededed{/if}">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr id="new_mode2" {if !$color_mode}style="display: none;"{/if}>
            <td align=right>{$lang.Text_color}<span class='help_bt' h_id='Text_color'></span>:</td>
            <td>
                <table>
                    <tr>
                        <td>
                            <input type="hidden" id='input_textColor' name='text_color' value='{if $text_color}{$text_color|htmlspecialchars}{else}#4B4B4B{/if}'>
                            <input type="text" class="colorSelector" id="textColor" value="{if $text_color}{$text_color|htmlspecialchars}{else}#4B4B4B{/if}">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan=2 align=center>
                <br>
                <input type='hidden' name='table' value='{$table_id}'>
                <input type='hidden' name='group' value='{$bgroup_id}'>
                <input type='hidden' name='csrf' value='{$csrf}'>
                <input type='hidden' name='back_url' value='{$smarty.get.back_url}'>
                <input class="btn btn-default btn-sm" type=submit name='save' value="{$lang.Save}"
                       onClick="if(!document.getElementById('name').value) { jalert('{$lang.alert_empty_bgroup_name}');return false; }">
                <input class="btn btn-default btn-sm" type=button
                       onclick="location.href='{if $back_url}{$back_url}{else}edit_button.php?table={$table_id}{/if}'"
                       value="{$lang.Cancel}">
            </td>
        <tr>
    </table>
</form>
<script>
    //функция работы палитры
    $('.colorSelector').each(function (i, item)
    {
        colorpickerSetings.change = function(color) {
            $(item).prev().val(color.toHexString());
        };
        $(this).spectrum(colorpickerSetings);
    });
    
    //функция show/hide режима редактироваия цвета
    function color_moding()
    {
        var mode1 = document.getElementById("color_mode1"),
            mode2 = document.getElementById("color_mode2");
        if (mode1.hasAttribute("checked")) { // Скрываем
            document.getElementById("old_mode").style.display = "none";
            document.getElementById("new_mode1").style.display = "table-row";
            document.getElementById("new_mode2").style.display = "table-row";
            
            mode2.setAttribute('checked', true);
            mode1.removeAttribute('checked');
        } else { // Показываем
            document.getElementById("old_mode").style.display = "table-row";
            document.getElementById("new_mode1").style.display = "none";
            document.getElementById("new_mode2").style.display = "none";
            mode1.setAttribute('checked', true);
            mode2.removeAttribute('checked');
        }
    };
    
    //создаем пременные цветов кнопок
    {foreach from=$buttonColors key=one_name item=one_color}
        var color_{$one_name} = '{$one_color}';
    {/foreach}
    
    //функция изменения цвета кнопки при изменении значения в списке
    function change_color(value)
    {
        $('#color_demo').css('background', this['color_' + value]);
    };
</script>