{include file="admin/header.tpl"}
{literal}
    <script>
        function SubmitForm(form)
        {
            FillInputs();
            form.submit();
        }

        function SetVal(placeholder)
        {
            placeholder.each(function(){
                var input = $(this).find('input.placeholder');
                $(this).find('div.portlet').each(function(){
                    input.val(input.val() + $(this).attr('id') + ",");
                });
            });
        }

        function FillInputs()
        {
            $('div.layoutHeader').each(function(){
                SetVal($(this));    
            });
        }
    </script>
{/literal}
{if $service->hasError()}
    <div class="error">
        {$service->getMessage()}
    </div>
{/if}
<div class="formAction">
    <h2>Rozmiestnenie modulov na stránke</h2>
    <p>
        <span class="btn"><a href="#" onclick=" return SubmitForm(document.layout)">Uložiť</a></span>
    </p>
    <div class="clr"></div>
</div>
{literal}
    <style>
        .column { width: 170px; float: left; padding-bottom: 20px; }
        .portlet { margin: 0 1em 1em 0; }
        .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
        .portlet-header .ui-icon { float: right; }
        .portlet-content { padding: 0.4em; }
        .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
        .ui-sortable-placeholder * { visibility: hidden; }

        .layout{width: 900px; border: 1px solid; margin-left: auto; margin-right: auto; margin-top: 20px}
        .layout div.column {}
        .layout div.layoutHeader .column{width: 100%; border-bottom: 1px solid;}
        .layout div.layoutHeader {clear:both}

        .layout div.layoutFooter .column{width: 100%; }
        .layout div.layoutFooter {clear: both; border-top: 1px solid}

        .layout div.layoutFloating .column{width: 100%; }
        .layout div.layoutFloating {clear: both; border-top: 1px solid}

        .layoutMain{display: block; clear:both}

        .layoutLeft{width: 198px; border: none; height: 100%}
        .layoutContent{width: 498px;}
        .layoutRight{width: 198px;border: none; height: auto}

        .middleColl{border-left: 1px solid; border-right: 1px solid}
        table.content{border-width: 0px}
        table.content td{vertical-align: top}
    </style>
{/literal}
<form name="layout" method="POST" action="" enctype="application/x-www-form-urlencoded">
    <div class="layout">
        {foreach from=$phList item=p key=k}
            <div class="layoutHeader">
                <input class="placeholder" id="{$k}" type="hidden" name="{$k}" value=""/>
                <h3>{$p}</h3>
                <div class="column">
                    {foreach from=$placeholders.placeholder.$k item=placeholder}
                        <div id="{$placeholder->getID()}" class="portlet">
                            <div class="portlet-header">
                                {$placeholder->getName()}
                            </div>
                            <div class="portlet-content">{$placeholder->getModuleName()}
                            </div>
                        </div>
                    {/foreach}
                </div>
            </div>
        {/foreach}
    </div>
    <div class="clr"></div>
</form>

{literal}
    <script>
        $(function() {
            $(".column").sortable({
                connectWith: ".column"
            });

            $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
                    .find(".portlet-header")
                    .addClass("ui-widget-header ui-corner-all")
                    .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
                    .end()
                    .find(".portlet-content");

            $(".portlet-header .ui-icon").click(function() {
                $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
                $(this).parents(".portlet:first").find(".portlet-content").toggle();
            });

            $(".column").disableSelection();
        });
    </script>
{/literal}

{include file="admin/footer.tpl"}