{% extends "base.html" %}
{% load static code %}

{% block title %}Connect your application · {{ site_title }}{% endblock %}

{% block content %}


<div class="flex items-center justify-center">

    <div class="m-4 max-w-4xl flex-auto">
        <h1 class="text-4xl font-bold">Connect your application</h1>

        <div class="mt-4">
            Connect your application to Bugsink to start tracking errors.
            Bugsink is compatible with the <a href="https://docs.sentry.io/platforms/">Sentry SDKs</a>.
            Use the following DSN to connect your application to Bugsink:
        </div>
{% code %}:::text
{{ dsn }}
{% endcode %}

        <h2 class="mt-8 text-2xl font-bold">Language-specific instructions</h2>
        <div class="mt-4">
            Pick your language to get specific instructions on how to set up the SDK:

            <ul class="flex mt-8">
                <li>
                    <a class="text-cyan-500 dark:text-cyan-300 font-bold text-center" href="python/"><img src="{% static 'images/lang-python.png' %}" class="w-24 mx-4" alt="Python"><div class="mt-2">Python</div></a>
                </li>
                <li>
                    <a class="text-cyan-500 dark:text-cyan-300 font-bold text-center" href="javascript/"><img src="{% static 'images/lang-javascript.png' %}" class="w-24 mx-4" alt="JavaScript"><div class="mt-2">JavaScript</div></a>
                </li>
                <li>
                    <a class="text-cyan-500 dark:text-cyan-300 font-bold text-center" href="php/"><img src="{% static 'images/lang-php.png' %}" class="w-24 mx-4" alt="PHP"><div class="mt-2">PHP</div></a>
                </li>
            </ul>

        </div>
        <div class="mt-4">
            Not listed? It will probably work anyway! Just use the DSN above, and let us know if you run into any issues (on <a href="https://github.com/bugsink/bugsink/issues" class="text-cyan-500 dark:text-cyan-300 font-bold">GitHub</a> or <a href="https://discord.gg/6Af6Yzz77C" class="text-cyan-500 dark:text-cyan-300 font-bold">Discord</a>).
        </div>

        <div class="mt-4">
            After triggering an event on purpose, it should now appear in the <a href="{% url "issue_list_open" project_pk=project.pk %}" class="text-cyan-500 dark:text-cyan-300 font-bold">list of open issues</a>.
        </div>
        <h2 class="mt-6 text-2xl font-bold">Further reading</h2>

        <div class="mt-4">
            For more information on how to use the SDK, check the <a href="https://www.bugsink.com/docs/sdk-recommendations/" class="text-cyan-500 dark:text-cyan-300 font-bold">Bugsink-specific SDK recommendations</a>.
        </div>

    </div>
</div>

{% endblock %}
