{% extends "base.html" %}
{% load compress static hc_extras %}

{% block title %}Account Settings - {% site_name %}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-sm-12">
        <h1 class="settings-title">Settings <small>{{ request.user.email }}</small></h1>
    </div>
</div>

<div class="row">
    <div class="col-sm-2">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="{% url 'hc-profile' %}">Account</a></li>
            {% if show_pricing %}
            <li><a href="{% url 'hc-billing' %}">Billing</a></li>
            {% endif %}
            <li><a href="{% url 'hc-notifications' %}">Email Reports</a></li>
            <li class="active"><a href="{% url 'hc-badges' %}">Badges</a></li>
        </ul>
    </div>

    <div class="col-sm-10">
        <div class="panel panel-default">
            <div class="panel-body settings-block">
                <h2 class="settings-title">Status Badges</h2>
                <p id="badges-description">
                    {% site_name %} provides status badges for each of the tags
                    you have used. Additionally, the "{% site_name %}"
                    badge shows the overall status of all checks in a
                    project. The badges have public, but hard-to-guess
                    URLs. You can use them in your READMEs,
                    dashboards or status pages.
                </p>

                <div id="b-format" class="btn-group" data-toggle="buttons">
                    <label id="show-svg" class="btn btn-default active">
                        <input type="radio" autocomplete="off" checked> SVG
                    </label>
                    <label id="show-json" class="btn btn-default">
                        <input type="radio" autocomplete="off"> JSON
                    </label>
                </div>

                <table id="badges-svg" class="badges table">
                {% for badge_set in badges %}
                    <tr>
                        <th colspan="2">{{ badge_set.project }}</th>
                    </tr>
                    {% for urldict in badge_set.urls %}
                    <tr>
                        <td>
                            <img src="{{ urldict.svg }}" alt="" />
                        </td>
                        <td class="svg-url">
                            <code>{{ urldict.svg }}</code>
                        </td>
                    </tr>
                    {% endfor %}
                {% endfor %}
                </table>
                <table id="badges-json" class="badges table">
                {% for badge_set in badges %}
                    <tr>
                        <th colspan="2">{{ badge_set.project }}</th>
                    </tr>

                    {% for urldict in badge_set.urls %}
                    <tr>
                        <td class="json-response" data-url="{{ urldict.json }}">
                        </td>
                        <td class="json-url">
                            <code>{{ urldict.json }}</code>
                        </td>
                    </tr>
                    {% endfor %}
                {% endfor %}
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/badges.js' %}"></script>
{% endcompress %}
{% endblock %}