{% extends theme('base.html') %}

{% block style %}
    <link href="/static/datatables/jquery.dataTables.min.css" rel="stylesheet">
    <link href="/static/datatables/dataTables.semanticui.min.css" rel="stylesheet">
{% endblock %}

{% block script %}
    <script src="/static/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/datatables/dataTables.semanticui.min.js"></script>
    <script src="/static/js/users.js"></script>
{% endblock %}

{% block content %}

    <div class="ui segment">
        <a class="ui primary button" href="{{ url_for('oidc.clients.add') }}">{% trans %}Add client{% endtrans %}</a>
    </div>

    <table class="ui table">
        <thead>
            <th></th>
            <th>{% trans %}Name{% endtrans %}</th>
            <th>{% trans %}URL{% endtrans %}</th>
            <th>{% trans %}Created{% endtrans %}</th>
        </thead>
        {% for client in clients %}
            <tr>
                <td>
                    <a href="{{ url_for('oidc.clients.edit', client_id=client.client_id) }}">
                        {% if client.logo_uri %}
                            <img class="ui avatar image" src="{{ client.logo_uri }}" alt="Client logo">
                        {% else %}
                            <i class="plug circular inverted black icon"></i>
                        {% endif %}
                    </a>
                </td>
                <td><a href="{{ url_for('oidc.clients.edit', client_id=client.client_id) }}">{{ client.name }}</a></td>
                <td><a href="{{ client.uri }}">{{ client.uri }}</a></td>
                <td>{% if client.issue_date %}{{ client.issue_date }}{% endif %}</td>
            </tr>
        {% endfor %}
    </table>

{% endblock %}