<div id="section_add_form">
    <div class="panel">
        <div class="title" id="section_add_close">
            Add Folder - <a href="javascript:">Cancel</a>
        </div>
        <div class="content clear">
            <div>
                <?php echo $form->render(); ?>
            </div>
            <div>
                &nbsp;
            </div>
        </div>
    </div>
</div>

<?php $url = str_replace('admin.', '', $request->base()); ?>
<div class="clear" id="section_add_list">
    <?php foreach ($section as $s) : ?>
        <div class="icon" id="section_<?php echo htmlspecialchars(ucfirst($s['id'])); ?>">
            <div class="content">
                <a href="page/index/<?php echo htmlspecialchars($s['id']); ?>">
                    <img src="admin/skin/icon/folder1.png" /><br /><?php echo htmlspecialchars(ucfirst($s['name'])); ?>
                </a>
            </div>
            <div class="action">
                <a target="_blank" href="<?php echo htmlspecialchars($url); ?>page/index/<?php echo htmlspecialchars($s['path']); ?>">View</a>
                <a href="section/edit/<?php echo htmlspecialchars($s['id']); ?>">Edit</a>
                <a href="meta/edit/section/<?php echo urlencode($s['id']); ?>" class="<?php if (!$s['meta']) : echo 'missing'; endif; ?>">Meta</a>
                <a href="javascript:delete_section(<?php echo htmlspecialchars($s['id']); ?>);">Delete</a>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#section_add_form form').submit(function() {
            form = this;
            $.post('section/add', { path:this.path.value, name:this.name.value },
                function(data, status) {
                    if (data.error != '')
                    {
                        alert(data.error);
                    }
                    else
                    {
                        $('#section_add_form').toggle();
                        $('#section_add_list').append('<div class="icon" id="section_' + data.id + '"><div class="content"><a href="page/index/' + data.id + '"><img src="admin/skin/icon/folder1.png" /><br />' + form.name.value + '</a></div><div class="action"><a target="_blank" href="<?php echo htmlspecialchars($url); ?>page/' + data.id + '">View</a><a href="section/edit/' + data.id + '">Edit</a><a href="javascript:delete_section(' + data.id + ');">Delete</a></div></div>');
                        form.name.value = '';
                        form.path.value = '';
                    }
                }, 'json');
            return false;
        });
        $('#section_add_form input[name=name]').bind('keyup', function() {
            $('#section_add_form input[name=path]').val($(this).val().replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]/g, '-').toLowerCase());
        });
        $('#section_add_close a').click(function() {
            $('#section_add_form').toggle();
        });
    });
    
    function delete_section(id)
    {
        if (confirm('Are you sure?'))
        {
            $.post('section/delete', { id:id },
                function(data, status) {
                    if (data.error != '')
                    {
                        alert(data.error);
                    }
                    else
                    {
                        $('#section_' + id).remove();
                    }
                }, 'json');
        }
    }
</script>