<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>Canaille test client</title>

        <link href="/static/fomanticui/semantic.min.css" rel="stylesheet">
        <link href="/static/css/base.css" rel="stylesheet">
        {% if logo_url %}<link rel="icon" href="{{ favicon_url }}">{% endif %}
        {% block style %}{% endblock %}

        <!--[if lt IE 9]>
            <script>window.html5 || document.write('<script src="/static/html5shiv/html5shiv.min.js"><\/script>')</script>
            <script src="/static/js/respond.min.js"></script>
        <![endif]-->

    </head>

    <body>
        <div class="ui container">
            <div class="ui masthead center aligned segment">
                <div class="ui text container">
                    <h2 class="ui header">
                        <img class="ui image" src="/static/img/canaille-head.png" alt="Canaille client" />
                        <div class="content">
                            {{ name }}
                        </div>
                    </h2>
                </div>

                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% for category, message in messages %}
                        <div class="ui attached message {{ category }}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endwith %}

                <div class="ui text container">
                    <p>
                        This is a dummy OpenID Connect client.
                        It illustrates how to plug another service on canaille so users can log in from canaille,
                        consents to share data, and then are redirect to the service.
                    </p>
                </div>
                {% if user %}
                    <div class="ui text container">
                        <br>
                        <p>
                            Here are the information this service has access to:
                        </p>
                    </div>

                    <div class="ui centered card">
                        {% if user.picture %}
                            <div class="image">
                                <img src="{{ user.picture }}" alt="Avatar">
                            </div>
                        {% endif %}
                        <div class="left aligned content">
                            <span class="header">{{ user.preferred_username or user.name }}</span>
                            <div class="meta" title="id">
                                {{ user.sub }}
                            </div>

                            {% if user.name %}
                                <div class="extra content">
                                    <i class="id card alternate icon" title="name"></i>
                                    {{ user.name }}
                                </div>
                            {% endif %}

                            {% if user.address %}
                                <div class="extra content">
                                    <i class="map marker alternate icon" title="address"></i>
                                    {{ user.address }}
                                </div>
                            {% endif %}

                            {% if user.email %}
                                <div class="extra content">
                                    <i class="envelope icon" title="mail"></i>
                                    <a href="mailto:{{ user.email }}">{{ user.email }}</a>
                                </div>
                            {% endif %}

                            {% if user.phone_number %}
                                <div class="extra content">
                                    <i class="phone icon" title="phone"></i>
                                    <a href="tel:{{ user.phone_number }}">{{ user.phone_number }}</a>
                                </div>
                            {% endif %}

                            {% if user.locale %}
                                <div class="extra content">
                                    <i class="flag icon" title="locale"></i>
                                    {{ user.locale }}
                                </div>
                            {% endif %}

                            {% if user.groups %}
                                <div class="extra content">
                                    <i class="user users icon" title="Groups"></i>
                                    {% for group in user.groups %}
                                        <span class="label" title="Groups">{{ group }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        {% if user.website %}
                            <a class="ui bottom attached button" href="{{ user.website }}">
                                <i class="world icon"></i>
                                Website
                            </a>
                        {% endif %}
                    </div>

                    <div class="ui buttons">
                        <a href="{{ config.OAUTH_AUTH_SERVER }}" target="_blank" class="ui huge button">
                            Identity server
                        </a>
                        <a class="ui huge negative button" href="{{ url_for('logout') }}">
                            Log out
                            <i class="right arrow icon"></i>
                        </a>
                    </div>
                {% else %}
                    <div class="ui buttons">
                        <a href="{{ config.OAUTH_AUTH_SERVER }}" target="_blank" class="ui huge button">
                            Identity server
                        </a>
                        <a class="ui huge primary button" href="{{ url_for('login') }}">
                            Sign in
                            <i class="right arrow icon"></i>
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>

        <script src="/static/jquery/jquery.min.js"></script>
        <script src="/static/fomanticui/semantic.min.js"></script>
        <script src="/static/js/base.js"></script>
        {% block script %}{% endblock %}
    </body>
</html>
