<?php
$home = $this->getParam('home', '');
?>
<div class="cover">
    <div class="zone xl">

        <h1 class="margin-bottom margin-top">Your Projects</h1>

        <p class="margin-bottom margin-top-negative-small">Take advantage of the Appwrite APIs and tools.</p>

        <ul class="margin-bottom-xl clear">
            <li class="pull-start margin-end margin-bottom-small"><a href="<?php echo $home; ?>/" target="_blank"><i class="icon-lamp"></i> &nbsp;Learn more</a></li>
            <li class="pull-start margin-end margin-bottom-small"><a href="<?php echo $home; ?>/docs" target="_blank"><i class="icon-book-open"></i> &nbsp;Docs</a></li>
            <li class="pull-start margin-end margin-bottom-small"><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 margin-top-negative-xl">
    <div class="margin-bottom-xl"
        data-service="projects.list"
        data-scope="console"
        data-event="load,projects.create"
        data-name="console-projects"
        data-success="trigger"
        data-success-param-trigger-events="projects.list">

        <div data-ls-if="0 == {{console-projects.length}}" class="box margin-bottom" style="display: none">
            <h3 class="margin-bottom-small text-bold">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.$id}}" class="box">
                    <div data-ls-bind="{{project.name}}" class="text-one-liner margin-bottom-tiny text-bold">&nbsp;</div>
                    
                    <p data-ls-if="({{project.platforms.length}})" class="text-fade text-size-small" data-ls-bind="{{project.platforms.length}} apps"></p>
                    <p data-ls-if="(!{{project.platforms.length}})" class="text-fade text-size-small">&nbsp;</p>
                    <!-- <ul data-ls-loop="project.platforms" data-ls-as="platform" class="clear margin-bottom" style="min-height: 30px; overflow: hidden;">
                        <li class="pull-start">
                            <div data-ls-if="{{platform.type}} === 'web'" class="corner">
                                <img src="" data-ls-attrs="src=/images/clients/web.png?v=<?php echo APP_CACHE_BUSTER; ?>" class="avatar xxs no-shadow" loading="lazy" width="30" height="30" />&nbsp;
                            </div>
                            
                            <div data-ls-if="{{platform.type}} === 'flutter-ios'" class="corner">
                                <img src="" data-ls-attrs="src=/images/clients/ios.png?v=<?php echo APP_CACHE_BUSTER; ?>" class="avatar xxs no-shadow" loading="lazy" width="30" height="30" />&nbsp;
                            </div>
                            
                            <div data-ls-if="{{platform.type}} === 'flutter-android'" class="corner">
                                <img src="" data-ls-attrs="src=/images/clients/android.png?v=<?php echo APP_CACHE_BUSTER; ?>" class="avatar xxs no-shadow" loading="lazy" width="30" height="30" />&nbsp;
                            </div>
                        </li>
                    </ul> -->
                    <div>
                        <i class="icon-right-open"></i>
                    </div>
                </a>
            </li>
        </ul>
        
        <button data-ls-ui-trigger="create-project">Create Project</button>
    </div>

    <div class="row responsive">
        <div class="col span-6 margin-bottom">
            <div class="box line">
                <h3 class="margin-bottom-small text-size-normal">Join The Community</h3>
        
                <p class="text-fade">Join Appwrite growing developers community channels.</p>
        
                <a href="<?php echo APP_SOCIAL_TWITTER; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Twitter"
                    data-analytics-event="click"
                    data-analytics-category="console/home"
                    data-analytics-label="Twitter Link"><i class="icon-twitter"></i></a>
                <a href="<?php echo APP_SOCIAL_FACEBOOK; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Facebook"
                    data-analytics-event="click"
                    data-analytics-category="console/home"
                    data-analytics-label="Facebook Link"><i class="icon-facebook"></i></a>
                <a href="<?php echo APP_SOCIAL_LINKEDIN; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Linkedin"
                    data-analytics-event="click"
                    data-analytics-category="console/home"
                    data-analytics-label="Linkedin Link"><i class="icon-linkedin"></i></a>
                <a href="<?php echo APP_SOCIAL_DISCORD; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> Discord Server"
                    data-analytics-event="click"
                    data-analytics-category="console/home"
                    data-analytics-label="Discord Link"><i class="icon-discord"></i></a>
                <a href="<?php echo APP_SOCIAL_GITHUB; ?>" target="_blank" rel="noopener" title="<?php echo APP_NAME;?> on Github"
                    data-analytics-event="click"
                    data-analytics-category="console/home"
                    data-analytics-label="GitHub Link"><i class="icon-github-circled"></i></a>
            </div>
        </div>
        <div class="col span-6 margin-bottom">
            <div class="box line">
                <h3 class="margin-bottom-small text-size-normal">Read The Docs</h3>
            
                <p class="text-fade">Take full advantage of Appwrite APIs and tools for your new project.</p>

                <a data-ls-attrs="href={{env.HOME}}/docs" target="_blank" rel="noopener"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Full Documentation</a>
            </div>
        </div>
    </div>
</section>