<?php
$home = $this->getParam('home', '');
?>
<div class="cover" style="background-size: 400px 400px; background-repeat: no-repeat;">
    <div class="zone xl">
        <div class="margin-top margin-bottom"><a href="/"><img src="/images/appwrite.svg" height="30" alt="Logo" /></a></div>

        <h1 class="margin-bottom">Welcome to Appwrite Console</h1>

        <p class="margin-bottom">Start creating projects and take advantage of Appwrite development tools and APIs.</p>

        <ul class="margin-bottom-xl clear">
            <li class="pull-start margin-end"><a href="<?php echo $home; ?>/" target="_blank"><i class="icon-lamp"></i> &nbsp;Learn More</a></li>
            <li class="pull-start margin-end"><a href="<?php echo $home; ?>/docs" target="_blank"><i class="icon-book-open"></i> &nbsp;Documentation</a></li>
            <li class="pull-start margin-end"><a href="<?php echo $home; ?>/support" target="_blank"><i class="icon-lifebuoy"></i> &nbsp;Support</a></li>
        </ul>
    </div>
</div>

<section class="zone xl margin-bottom-large margin-top-negative-large">
    <div
        data-service="projects.listProjects"
        data-scope="console"
        data-event="load,project-create"
        data-name="console-projects"
        data-success="trigger"
        data-success-triggers="projects-load">

        <div data-ls-if="0 == {{console-projects.length}}" class="box margin-bottom" style="display: none">
            <h3 class="margin-bottom">Get Started</h3>

            <p class="margin-bottom-no">No Projects Found, Create your first project now.</p>
        </div>

        <ul data-ls-loop="console-projects" data-ls-as="project" data-ls-append="" class="tiles cell-3" style="visibility: hidden">
            <li class="margin-bottom">
                <a data-ls-attrs="href=/console/home?project={{project.$uid}}" class="box">
                    <div data-ls-bind="{{project.name}}" class="text-one-liner margin-bottom-large">&nbsp;</div>

                    <i class="icon-right-open"></i>
                </a>
            </li>
        </ul>
        
        <button data-ls-ui-trigger="create-project">Create Project</button>
    </div>
</section>