{% extends '@DWGinger/base.devel.html.twig' %}

{% block body %}
    <div class="row mb-5">
        <div class="col">
            <div id="greets" class="row">
                <div class="col-7 text-monospace mt-4" style="line-height: 1.8;">
                    <h1 class="h2">Greetings, {{ app.user.username|upper }}!</h1>
                    <div class="mt-3">
                        <p>
                            This quick start guide will help you getting started
                            on how to use the Ginger API and work with our development tools.
                        </p>
                        <p>Let´s keep things spicy and bring it own!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if app.user.apiClient is not null and app.user.apiClient.publicId and app.user.apiClient.secret %}
        <div id="tools" class="row mb-5">
            <div class="col-12">
                <h2 class="h3 mb-3">Tools</h2>
                <div class="row">
                    <div class="col-md-6 mb-80">
                        <div class="d-flex feature-item">
                            <div class="mr-3">
                                <a href="{{ path('swagger_ui') }}" target="_blank">
                                    <i class="fa fa-book-open tools" aria-hidden="true"></i>
                                </a>
                            </div>
                            <div>
                                <h4>API Docs</h4>
                                <p>
                                    Read the API documentation or send requests to the API directly from the UI
                                    <a href="{{ path('swagger_ui') }}" target="_blank" class="ml-2">
                                        <i class="fa fa-external-link" aria-hidden="true"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-80">
                        <div class="d-flex feature-item">
                            <div class="mr-3">
                                <a href="{{ path('graphql_playground') }}" target="_blank" >
                                    <i class="fa fa-code tools" aria-hidden="true"></i>
                                </a>
                            </div>
                            <div>
                                <h4>GraphQL Playground</h4>
                                <p>
                                    GraphQL IDE for better development workflows (interactive schema docs, query-history and more...)
                                    <a href="{{ path('graphql_playground') }}" target="_blank" class="ml-2">
                                        <i class="fa fa-external-link" aria-hidden="true"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <h2 class="h3 mb-3">Authentication</h2>
                <p>To interact with the Ginger API send a bearer token in the <code>Authorization</code> header with your requests.</p>
                <p>In addition to your username and password you`ll need the following app credentials at your fingertips to gain a valid access token:</p>
                <div class="row">
                    <div class="col">
                        <table class="table table-dark">
                            <thead>
                            <tr>
                                <th scope="col">Parameter</th>
                                <th scope="col">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>client_id</td>
                                <td><code>{{ app.user.apiClient.publicId }}</code></td>
                            </tr>
                            <tr>
                                <td>client_secret</td>
                                <td><code>{{ app.user.apiClient.secret }}</code></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <h2 class="h4 mb-3">Obtaining a token</h2>
                <p>
                    In order to get a valid access token to work with the API you can either authenticate your requests from
                    within the API Docs or fetch the token by yourself.
                </p>
                <h2 class="h5">Using the API Docs</h2>
                <ul>
                    <li>Click the <i>Authorize</i>-button from within the UI</li>
                    <li>Submit your app- and user credentials</li>
                </ul>
                <p>From now on the access token will be sent along with the request headers so you can access to the API:</p>
                <h2 class="h5">Fetch token manually</h2>
                <p>
                    Issue a <code>GET</code> or <code>POST</code> request to <code>{{ path('fos_oauth_server_token') }}</code> containing the following payload:
                </p>
                <div>
                    <table class="table table-dark">
                        <thead>
                        <tr>
                            <th scope="col">Parameter</th>
                            <th scope="col">Value</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>client_id</td>
                            <td><code>{{ app.user.apiClient.publicId }}</code></td>
                        </tr>
                        <tr>
                            <td>client_secret</td>
                            <td><code>{{ app.user.apiClient.secret }}</code></td>
                        </tr>
                        <tr>
                            <td>grant_type</td>
                            <td><code>password</code></td>
                        </tr>
                        <tr>
                            <td>username</td>
                            <td><code>{{ app.user.username }}</code></td>
                        </tr>
                        <tr>
                            <td>password</td>
                            <td><code>{use-your-password-for-this}</code></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="mb-5"></div>
            </div>
        </div>
    {% else %}
        <div class="row mb3">
            <div class="col">
                <h2 class="h3 mb-3">Oooops</h2>
                <p>
                    Seems there is no API client available for you yet.
                    Sorry for that, please <a href="mailto:sfdev@datenwerk.at">get in touch with our team</a> so we can fix this for you...
                </p>
            </div>
        </div>
    {% endif %}
{% endblock %}