{% extends 'base.html.j2' %}

{% block content %}

<style>
    .detail-view-field {
        display: unset;
        height: 30px;
        line-height: 30px;
        padding: 0px 20px 40px 20px;

    }

    .detail-view-field label {
        display: inline-block;
        font-weight: bold;
        width: 200px;
        margin: 10px;
        /*padding: 10px;*/
        height: 30px;
        line-height: 30px;

    }

    .detail-view-field span {
        display: inline-block;
        width: 340px;
        margin: 10px;
        /*padding: 10px;*/
        border-bottom: 1px solid #ccc;
        height: 30px;
        line-height: 30px;

    }
</style>
<div>
    <div style="align-items:flex-start; align-content: center; display: flexbox; width: 100%">

        <div style="display: inline; width: 40%; margin: 30px;">

            <div class="detail-view-field">
                <label>{{ form.default_organization.label }}</label>
                <span>{{ settings.default_organization }}</span>
            </div>

            <div class="detail-view-field">
                <label>{{ form.timezone.label }}</label>
                <span>{{ settings.timezone }}</span>
            </div>

            <div class="detail-view-field">
                <label>{{ form.browser_mode.label }}</label>
                <span>{{ settings.get_browser_mode_display }}</span>
            </div>

        </div>
        <div>
            <input type="button" value="Edit"
                onclick="window.location='{% url '_settings_user_change' settings.id %}';">
        </div>
    </div>

    <div>
        <h3>API Tokens</h3>
        <div style="justify-content: space-between;">
            <input type="button" value="Generate Token"
                onclick="window.location='{% url '_user_auth_token_add' settings.id %}';">
        </div>
        <table>
            <thead>
                <th>Note</th>
                <th>Created</th>
                <th>Expires</th>
                <th>&nbsp;</th>
            </thead>
            {% if tokens %}
            {% for token in tokens %}
            <tr>
                <td>
                    {% if token.note %}
                    {{ token.note }}
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td>{{ token.created }}</td>
                <td>{{ token.expires }}</td>
                <td><a href="{% url '_user_auth_token_delete' pk=token.id user_id=settings.id %}">Delete</a></td>
            </tr>
            {% endfor %}
            {% endif %}
        </table>
    </div>
</div>


{% endblock %}