<?php
$platforms = $this->getParam('platforms');
$platform = [];

foreach($platforms['client']['sdks'] ?? [] as $lang) {

    $key = $lang['key'] ?? '';

    if($key === 'web') {
        $platform = $lang;
        break;
    }
}

$version = $platform['version'] ?? '';
$demos = $platform['demos'] ?? [];
?>
<p>Appwrite is a development platform that provides a powerful API and management console to get your next project up and running quickly.</p>

<p><a target="_blank" rel="noopener" href="https://cloud.appwrite.io/">Create your first project now</a> and start building on Appwrite Cloud.</p>

<h2><a href="/docs/getting-started-for-web#addPlatform" id="addPlatform">Add Your Web Platform</a></h2>

<p>To init your SDK and interact with Appwrite services, you need to add a web platform to your project. To add a new platform, go to your Appwrite Console, choose the project you created in the step before and click the 'Add Platform' button.</p>

<p>From the options, choose to add a <b>web</b> platform and add your client app hostname. By adding your hostname to your project platform, you are allowing cross-domain communication between your project and the Appwrite API. Only web apps hosted on domains specified in a web platform will be able to make requests to your Appwrite instance, preventing unwanted access from malicious actors.</p>

<p>Web platforms allow wildcard hostnames through a <span class="tag">*</span> character. The wildcard character can be applied anywhere in a hostname, both <span class="tag">*.example.com</span> and <span class="tag">prod.*.example.com</span> are valid examples. Avoid using wildcards unless necessary to keep your Appwrite project secure.</p>

<?php //TODO add console ui image here to show where to find the platforms button ?>

<h2><a href="/docs/getting-started-for-web#getSDK" id="getSDK">Get Appwrite Web SDK</a></h2>

<h3><a href="/docs/getting-started-for-web#npm" id="npm">NPM</a></h3>

<p>Use <a href="https://npmjs.com" target="_blank">NPM (node package manager)</a> from your command line to add Appwrite SDK to your project.</p>

<div class="ide margin-bottom" data-lang="bash" data-lang-label="Bash">
    <pre class="line-numbers"><code class="prism language-bash" data-prism>npm install appwrite</code></pre>
</div>

<p>When you're using a bundler (like <a href="http://browserify.org/" target="_blank" rel="noopener">Browserify</a> or <a href="https://webpack.js.org/" target="_blank" rel="noopener">Webpack</a>), import the Appwrite module when you need it:</p>

<div class="ide" data-lang="javascript" data-lang-label="Web SDK">
    <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Account, ID } from 'appwrite';</code></pre>
</div>

<h3><a href="/docs/getting-started-for-web#cdn" id="cdn">CDN</a></h3>

<p>To install with a CDN (content delivery network) add the following scripts to the bottom of your tag, but before you use any Appwrite services:</p>

<div class="ide" data-lang="html" data-lang-label="HTML">
    <pre class="line-numbers"><code class="prism language-markup" data-prism><?php echo htmlentities('<script src="https://cdn.jsdelivr.net/npm/appwrite@'.$this->escape($version).'"></script>
<script>
    const { Client, Account, ID } = Appwrite;
    // Your code below...
</script>'); ?></code></pre>
</div>

<h2><a href="/docs/getting-started-for-web#initSDK" id="initSDK">Init your SDK</a></h2>

<p>Initialize your SDK code with your project ID which can be found in your project settings page.</p>

<div class="ide" data-lang="javascript" data-lang-label="Web SDK">
    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const client = new Client()
    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
    .setProject('[PROJECT_ID]');               // Your project ID
</code></pre>
</div>

<h2><a href="/docs/getting-started-for-web#makeRequest" id="makeRequest">Make Your First Request</a></h2>

<p>After your SDK configuration is set, access any of the Appwrite services and choose any request to send. Full documentation for any service method you would use is found in the SDK documentation or in the API References section.</p>

<div class="ide" data-lang="javascript" data-lang-label="Web SDK">
                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const account = new Account(client);

// Register User
account.create(
    ID.unique(),
    'me@example.com',
    'password',
    'Jane Doe'
).then(response => {
    console.log(response);
}, error => {
    console.log(error);
});</code></pre>
</div>

<h2><a href="/docs/getting-started-for-web#listenToChanges" id="listenToChanges">Listen to Changes</a></h2>

<p>To listen to changes in realtime from Appwrite, subscribe to a variety of channels and receive updates within milliseconds. Full documentation for Realtime is found <a href="/docs/realtime">here</a>.</p>

<div class="ide" data-lang="javascript" data-lang-label="Web SDK">
                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Subscribe to files channel
client.subscribe('files', response => {
    if(response.events.includes('buckets.*.files.*.create')) {
        // Log when a new file is uploaded
        console.log(response.payload);
    }
});</code></pre>
</div>

<h2><a href="/docs/getting-started-for-web#fullExample" id="fullExample">Full Example</a></h2>
<div class="ide" data-lang="javascript" data-lang-label="Web SDK">
                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Account, ID } from "appwrite";

const client = new Client()
    .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
    .setProject('[PROJECT_ID]');               // Your project ID

const account = new Account(client);

// Register User
account.create(
    ID.unique(),
    'me@example.com',
    'password',
    'Jane Doe'
).then(response => {
    console.log(response);
}, error => {
    console.log(error);
});

// Subscribe to files channel
client.subscribe('files', response => {
    if(response.events.includes('buckets.*.files.*.create')) {
        // Log when a new file is uploaded
        console.log(response.payload);
    }
});</code></pre>
</div>

<h2><a href="/docs/getting-started-for-web#demos" id="demos">Demos</a></h2>

<p>Below is a list of some demos to help you get started with Appwrite for Web using your favorite tools and framework of choice.</p>

<table cellspacing="0" cellpadding="0" border="0" class="full margin-bottom-large text-size-small vertical">
        <thead>
        <tr>
            <th style="width: 80px"></th>
            <th style="width: 180px">Demo</th>
            <th>GitHub Repository</th>
            <th style="width: 120px"></th>
        </tr>
        </thead>
        <tbody>
        <?php foreach($demos as $demo):
            $name = $demo['name'] ?? '';
            $icon = $demo['icon'] ?? '';
            $description = $demo['description'] ?? '';
            $source = $demo['source'] ?? '';
            $url = $demo['url'] ?? '';
            $repo = str_replace('https://github.com/', '', $source);
            ?>
            <tr>
                <td>
                    <img src="/images-ee/platforms/<?php echo $icon; ?>" alt="Logo" height="30" class="force-light sdk-logo margin-start margin-end" />
                    <img src="/images-ee/platforms/dark/<?php echo $icon; ?>" alt="Logo" height="30" class="force-dark sdk-logo margin-start margin-end" />
                </td>
                <td>
                    <?php echo $name; ?>
                </td>
                <td>
                    <a href="<?php echo $source; ?>" target="_blank" rel="noopener"><?php echo $repo; ?></a>
                </td>
                <td>
                    <a href="<?php echo $url; ?>" target="_blank" rel="noopener">Live Example</a>
                </td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>

<h2><a href="/docs/getting-started-for-web#nextSteps" id="nextSteps">Next Steps</a></h2>

<p>Appwrite has many services and tools to help improve your app and speed up your development. The best way to learn how you can take advantage of them is to explore the different API references docs.</p>
