<?php $applications = $this->getAdmin()->getApplications(); ?>
<?php $has_applications = false; ?>

<div id="applications_list" class="application applications_list content">

    <div class="application_content inner_content">
        <div class="title">
            <i class="left icon-dashboard"></i>
            <h2 class="left f-rounded"><?php echo $this->_('Dashboard'); ?></h2>
            <div class="clear"></div>
            <hr class="reverse">
        </div>
        <div class="wl_panel">
            <div class="create right" id="create_application" style="display:none;">
                <p class="f-rounded"><?php echo $this->_('Create a new application'); ?></p>
                <div class="form area">
                    <form id="createForm" action="<?php echo $this->getUrl('admin/application/createpost'); ?>" method="post">
                        <button type="submit" class="delete f-rounded right"><?php echo $this->_('Create'); ?></button>
                        <input type="text" id="app_name" name="name" placeholder="<?php echo $this->_("Application Name"); ?>" class="required input left" />
                        <div class="clear"></div>
                    </form>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="area">
            <h3 class="title">
                <span class="area left"><?php echo $this->_('My Applications'); ?></span>
                <hr class="reverse">
                <span class="area right wl_panel">
                    <button type="button" onclick="$('#create_application').slideDown(300, function() {$('#app_name').focus();});" class="default_button add right">
                        <i class="icon-plus"></i>
                    </button>
                </span>
                <div class="clear"></div>
            </h3>
            <div class="list_content">
                <ul>
                    <?php foreach($applications as $key => $application) : ?>
                        <?php if(!$application->isActive()) continue; ?>
                        <?php $has_applications = true; ?>
                        <li class="application" id="application_<?php echo $application->getId(); ?>">
                            <h4 class="subtitle pointer toggle_details" rel="<?php echo $application->getId(); ?>">
                                <?php if($application->getIcon()) : ?>
                                <img src="<?php echo $application->getIcon(); ?>" class="left" height="45" />
                                <?php endif; ?>
                                <span class="left"><?php echo $application->getName(); ?></span>
                                <button type="button" class="right delete delete_app classic" rel="<?php echo $application->getId() ?>"><i class="icon-remove"></i></button>
                                <div class="clear"></div>
                            </h4>
                            <div class="clear"></div>
                            <hr class="separator area reverse">
                            <div id="application_details_<?php echo $application->getId(); ?>" class="application_details" style="display:none">
                                <div class="left">
                                    <div class="logo left">
                                        <a href="<?php echo $this->getUrl('admin/application/set', array('id' => $application->getId())); ?>" class="left">
                                            <img class="" src="<?php echo $application->getIcon(); ?>" height="100" />
                                        </a>
                                    </div>
                                    <div class="status left" style="font-size: 20px;">
                                        <p><?php echo $this->_('Created at %s', $application->getFormattedCreatedAt($this->_('MM/dd/y'))); ?></p>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="right">
                                    <a href="<?php echo $this->getUrl('admin/application/set', array('id' => $application->getId())); ?>" class="manage default_button reverse rounded block"><?php echo $this->_('Manage'); ?></a>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    <?php if(!$has_applications) : ?>
        $('#create_application').show();
        $('#app_name').focus();
    <?php endif; ?>

    $('#createForm').submit(function() {
        if($(this).valid()) {
            reload(this, this.action, true);
        }
        return false;
    });

    $('.toggle_details').click(function() {
        var application  = $('#application_'+$(this).attr('rel'));
        var details = $('#application_details_'+$(this).attr('rel'));
        if(details.is(':visible')) {
            application.animate({'padding': 0}).removeClass('inner_content opened');
            application.find('hr').addClass('reverse');
            details.stop().slideUp();
        }
        else {
            application.animate({'padding': '10px'}).addClass('inner_content opened');
            application.find('hr').removeClass('reverse');
            details.stop().slideDown();
        }
    });

    $('.delete_app').click(function(){
        var app_id = $(this).attr('rel');
        var application  = $('#application_'+app_id);
        var details = $('#application_details_'+$(this).attr('rel'));
        if(confirm('<?php echo $this->_('Are you sure you want to delete this application?'); ?>')) {
            reload(this.parentNode, '<?php echo $this->getUrl('admin/application/delete'); ?>/id/'+app_id, true, function(datas) {
                application.stop().animate({'padding': 0}).slideUp(400, 'linear', function(){
                    application.remove();
                });
            });
        }
    });

    window.setTimeout(function() {
        $('.toggle_details:first').click();
    }, 500);
</script>
<style>

    .list_content { margin-top: 20px; }
    .area .subtitle span.left {
        margin-left: 10px;
        margin-right: 0;
    }

    .applications_list .delete_app {margin-top: 10px;}
    .applications_list .create {
        margin-top: 30px;
        margin-bottom: 60px;
        margin-right: 30px;
    }
    .applications_list .create * {
        margin: 0;
        font-size: 31px;
    }
    .applications_list .create .form {
        width: 476px;
        padding: 12px;
        border: 1px solid;
        border-radius: 10px;
    }
    .applications_list .create .form.area {
        min-height: 40px;
    }
    .applications_list .create .form input, .applications_list .create .form button {
        height: 39px;
        padding: 0;
        text-align: center;
    }
    .applications_list .create .form input {
        width: 324px;
        border: none;
        border-radius: 5px 0 0 5px;
        font-size: 29px;
        line-height: 39px;
    }
    .applications_list .create .form button {
        width: 150px;
        border-radius: 0 5px 5px 0;
    }
    .applications_list li.application { margin: 10px 0; padding: 0; border-radius: 5px; }

    .applications_list li.application .application_title { border-radius: 5px 5px 0 0; }
    .applications_list li.application .application_title a { display: block; padding: 10px; font-size: 15px; }

    .applications_list li.application .application_details { padding: 10px; border-radius: 0 0 5px 5px; }
    .applications_list li.application .application_details div.logo { display: block; width: 100px; height: 100px; border-radius: 10px; }
    .applications_list li.application .application_details div.status { margin-left: 20px; margin-top: 30px; }
    .applications_list li.application .application_details a.manage.default_button { width: auto; margin-top: 35px; padding: 2px 20px; line-height: 27px; font-size: 27px; }
    div.area .title span.right div.toggle { margin: 0; }
    div.area .title span.right div.toggle label { font-size: 18px; }
</style>
<div class="clear"></div>
