<?php
$layout     = $this->getParam('layout', 'xxl');
$sdk        = $this->getParam('sdk', '');
$family     = $this->getParam('family', '');
$title      = $this->getParam('title', '');
$subtitle   = $this->getParam('subtitle', '');

$clientSDK      = ($family === APP_PLATFORM_CLIENT && !empty($sdk)) ? '?sdk=' . $sdk : '';
$serverSDK      = ($family === APP_PLATFORM_SERVER && !empty($sdk)) ? '?sdk=' . $sdk : '';

$cols = [
    'xxl' => ['nav' => 'span-3', 'main' => 'span-9'],
    'xxxl' => ['nav' => 'span-2', 'main' => 'span-10'],
]
?>
<div class="zone <?php echo $layout; ?> docs" data-general-strech-value="<?php echo $layout; ?>">
    <div class="row responsive text-size-small">
        <div class="col <?php echo $cols[$layout]['nav']; ?>">
            <nav data-ui-highlight data-ls-ui-open>
                <h2 class="margin-start-negative-tiny"><i class="icon-menu"></i><i class="icon-cancel"></i> &nbsp; Table of contents</h2>

                <ul class="margin-bottom">
                    <li><a href="/docs">Home</a></li>
                </ul>

                <div class="margin-bottom-small">
                    <b class="text-size-small">Getting Started</b>
                </div>

                <ul class="margin-bottom">
                    <!-- <li><a href="/docs/overview">Overview</a></li> -->
                    <li><a href="/docs/getting-started-for-web">Appwrite for Web</a></li>
                    <li><a href="/docs/getting-started-for-flutter">Appwrite for Flutter</a></li>
                    <li><a href="/docs/getting-started-for-apple">Appwrite for Apple</a></li>
                    <li><a href="/docs/getting-started-for-android">Appwrite for Android</a></li>
                    <li><a href="/docs/getting-started-for-server">Appwrite for Server</a></li>
                    <li>
                        <a href="/docs/command-line"><i class="icon-right-dir"></i> Appwrite CLI</a>
                        <ul class="margin-top-small margin-bottom-small">
                            <li>&nbsp;&nbsp;<a href="/docs/command-line-deployment" data-selected="/docs/command-line"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Deployment</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/command-line-commands" data-selected="/docs/command-line"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Commands</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/command-line-ci" data-selected="/docs/command-line"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>CI Mode</a></li>
                        </ul>
                    </li>
                    <li><a href="/docs/sdks">SDKs</a></li>
                </ul>

                <div class="margin-bottom-small">
                    <b class="text-size-small">APIs</b>
                </div>

                <ul class="margin-bottom">
                    <li><a href="/docs/rest">REST</a></li>
                    <li><a href="/docs/graphql">GraphQL</a></li>
                    <li><a href="/docs/realtime">Realtime</a></li>
                </ul>

                <div class="margin-bottom-small">
                    <b class="text-size-small">References</b>
                </div>

                <ul class="margin-bottom">
                    <li><a href="/docs/client/account<?php echo $this->escape($clientSDK); ?>">Account</a></li>
                    <li><a href="/docs/server/users<?php echo $this->escape($serverSDK); ?>">Users</a></li>
                    <li><a href="/docs/client/teams<?php echo $this->escape($clientSDK); ?>">Teams</a></li>
                    <li><a href="/docs/client/databases<?php echo $this->escape($clientSDK); ?>">Databases</a></li>
                    <li><a href="/docs/client/storage<?php echo $this->escape($clientSDK); ?>">Storage</a></li>
                    <li><a href="/docs/client/functions<?php echo $this->escape($clientSDK); ?>">Functions</a></li>
                    <li><a href="/docs/client/locale<?php echo $this->escape($clientSDK); ?>">Localization</a></li>
                    <li><a href="/docs/client/avatars<?php echo $this->escape($clientSDK); ?>">Avatars</a></li>
                </ul>

                <div class="margin-bottom-small">
                    <b class="text-size-small">Guides</b>
                </div>

                <ul class="margin-bottom">
                    <li>
                        <a href="/docs/databases"><i class="icon-right-dir"></i> Databases</a>
                        <ul class="margin-top-small margin-bottom-small">
                            <li>&nbsp;&nbsp;<a href="/docs/databases-queries" data-selected="/docs/databases"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Queries</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/databases-pagination" data-selected="/docs/databases"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Pagination</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/databases-relationships" data-selected="/docs/databases"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Relationships (experimental)</a></li>
                        </ul>
                    </li>                    
                    <li><a href="/docs/storage">Storage</a></li>
                    <li>
                        <a href="/docs/authentication"><i class="icon-right-dir"></i> Authentication</a>
                        <ul class="margin-top-small margin-bottom-small">
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-email-pass" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Email and Password</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-sms" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Phone (SMS)</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-magic" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Magic URL</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-oauth" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>OAuth 2</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-anonymous" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Anonymous</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-management" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>User Management</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-server" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Server Integrations</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/authentication-security" data-selected="/docs/authentication"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i>Security</a></li>                                                
                        </ul>
                    </li>
                    <li>
                        <a href="/docs/functions"><i class="icon-right-dir"></i> Functions</a>
                        <ul class="margin-top-small margin-bottom-small">
                            <li>&nbsp;&nbsp;<a href="/docs/functions-develop" data-selected="/docs/functions"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Develop</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/functions-deploy" data-selected="/docs/functions"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Deploy</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/functions-execute" data-selected="/docs/functions"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Execute</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/functions-runtimes" data-selected="/docs/functions"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Runtimes</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/functions-examples" data-selected="/docs/functions"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Examples</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="/docs/migrations"><i class="icon-right-dir"></i> Migrations</a>
                        <ul class="margin-top-small margin-bottom-small">
                            <li>&nbsp;&nbsp;<a href="/docs/migrations-firebase" data-selected="/docs/migrations"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Firebase</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/migrations-supabase" data-selected="/docs/migrations"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Supabase</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/migrations-nhost" data-selected="/docs/migrations"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> NHost</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/migrations-cloud-to-self-hosted" data-selected="/docs/migrations"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Cloud to Self-hosted</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/migrations-self-hosted-to-cloud" data-selected="/docs/migrations"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Self-hosted to Cloud</a></li>
                        </ul>
                    </li>
                </ul>

                <div class="margin-bottom-small">
                    <b class="text-size-small">Advanced</b>
                </div>

                <ul class="margin-bottom">
                    <li><a href="/docs/keys">API Keys</a></li>
                    <li><a href="/docs/permissions">Permissions</a></li>
                    <li><a href="/docs/events">Events</a></li>
                    <li><a href="/docs/queries">Queries</a></li>
                    <li><a href="/docs/pagination">Pagination</a></li>
                    <li><a href="/docs/webhooks">Webhooks</a></li>
                    <li><a href="/docs/custom-domains">Custom Domains</a></li>
                    <li><a href="/docs/email-and-sms-templates">Email Templates</a></li>
                    <li><a href="/docs/response-codes">Response Codes</a></li>
                    <li><a href="/docs/rate-limits">Rate Limits</a></li>
                    <li>
                        <a href="/docs/self-hosting"><i class="icon-right-dir"></i> Self-Hosting</a>

                        <ul class="margin-top-small margin-bottom-small">
                            <li>&nbsp;&nbsp;<a href="/docs/configuration" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Configuration</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/environment-variables" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Env. Variables</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/email-delivery" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Email Delivery</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/sms-delivery" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> SMS Delivery</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/certificates" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Certificates</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/debugging" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Debugging</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/upgrade" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Upgrade</a></li>
                            <li>&nbsp;&nbsp;<a href="/docs/production" data-selected="/docs/self-hosting"><i class="icon-angle-circled-right margin-start-negative-tiny margin-end-tiny"></i> Production</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="col <?php echo $cols[$layout]['main']; ?>">
            <article>
                <a href="/docs" class="back"><i class="icon-left-open"></i> Docs</a>

                <h1 class="margin-top-small margin-bottom">
                    <?php echo $this->escape($title); ?>

                    <?php if (!empty($subtitle)) : ?>
                        &nbsp;<span class="text-fade text-size-normal">| <?php echo $this->escape($subtitle); ?></span>
                    <?php endif; ?>
                </h1>

                <?php echo $this->exec($this->getParam('page', [])); ?>
            </article>&nbsp;
        </div>
    </div>
</div>