{% load i18n %}

<style type="text/css">
.client-platform-list {
    list-style: none;
    margin-left: 0;
    margin-bottom: 10px;
}
.client-platform-list li {
    display: inline-block;
    width: 64px;
    height: 64px;
}
.client-platform-list span {
    width: 48px;
    height: 48px;
    display: block;
    text-align: center;
    margin: 0 auto;
    -moz-border-radius: 48px;
    -webkit-border-radius: 48px;
    border-radius: 48px;
    background: #fff;

}
.client-platform-list img {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: inline-block;
}
.client-platform-list a {
    text-align: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    vertical-align: bottom;
    display: block;
}
</style>
{% if key %}
    <p>{% trans "To start sending events, configure your client with the following DSN value:" %}</p>

    <pre class="clippy">{{ dsn }}</pre>

    <p>{% blocktrans with 'https://github.com/getsentry/raven-js' as link %}If this is a client that only needs public access (like <a href="{{ link }}">raven-js</a>), you can use the following public DSN:{% endblocktrans %}</p>

    <pre class="clippy">{{ dsn_public }}</pre>
{% else %}
    {% url 'sentry-project-keys' project.slug as link %}
    <p>{% blocktrans %}There is no API key assigned to your account. Generate a new key or select one from the <a href="{{ link }}">API Keys page</a>.{% endblocktrans %}</p>
{% endif %}

<div class="page-header">
    <h3>{% trans "Platforms" %}</h3>
</div>
<ul class="client-platform-list">
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'python' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/python48x48.png" %}"></span>
            <strong>Python</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'php' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/php48x48.png" %}"></span>
            <strong>PHP</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'ruby' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/ruby48x48.png" %}"></span>
            <strong>Ruby</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'javascript' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/javascript48x48.png" %}"></span>
            <strong>JavaScript</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'java' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/java48x48.png" %}"></span>
            <strong>Java</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'node.js' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/node48x48.png" %}"></span>
            <strong>Node.js</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'ios' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/ios48x48.png" %}"></span>
            <strong>iOS</strong>
        </a>
    </li>
</ul>
<div class="page-header">
    <h3>{% trans "Frameworks" %}</h3>
</div>
<ul class="client-platform-list">
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'rails3' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/rails48x48.png" %}"></span>
            <strong>Rails 3</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'rails4' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/rails48x48.png" %}"></span>
            <strong>Rails 4</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'django' %}">
            <span><img src="{% url 'sentry-media' "sentry" "images/platforms/django48x48.png" %}"></span>
            <strong>Django</strong>
        </a>
    </li>
</ul>

<div class="page-header">
    <h3>{% trans "More Clients" %}</h3>
</div>
<ul>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'csharp' %}">
            <strong>C#</strong>
        </a>
    </li>
    <li>
        <a href="{% url 'sentry-docs-client' project.team.slug project.slug 'r' %}">
            <strong>R Project</strong>
        </a>
    </li>
</ul>

<p>{% blocktrans with 'http://sentry.readthedocs.org' as link %}For more information on developing clients and the Sentry API, see the <a href="{{ link }}">documentation</a>.{% endblocktrans %}</p>
