{% extends 'admin/base.html' %}
{% load i18n %}
{% load static %}

{% block stylesheet %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/dataTables.bootstrap.css' %}">
{% endblock stylesheet %}

{% block title %}{% trans 'Result' %} | {{ resource.name }}{% endblock title %}

{% block content %}
{# TODO(somay, 170120): id="content" を指定しない。この id は password_print_area.js のためだけに付与されている。 #}
<div id="content" class="container-fluid">

{% block navbar %}
<div class="row">
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="{% url 'dashboard' %}">
                <img src="{% static 'img/header-logo.gif' %}" height="48px" alt="Unicorn ID Manager">
            </a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li {% if resource.type == 'User' %}class="active"{% endif %}>
                <a href="{% url 'users' target=target.id %}">{% trans 'Users' %}</a>
            </li>
            <li {% if resource.type == 'Group' %}class="active"{% endif %}>
                <a href="{% url 'groups' target=target.id %}">{% trans 'Groups' %}</a>
            </li>
            <li><a href="{% url 'result' target=target.id %}">{% trans 'Result' %}</a></li>
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">
                    {{ admin.name }}<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{% url 'admin_password' %}">{% trans 'Change Password' %}</a></li>
                    <li><a href="/unicornidm/documentation/">{% trans 'Help' %}</a></li>
                    <li class="divider"></li>
                    <li><a href="{% url 'logout' %}">{% trans 'Logout' %}</a></li>
                </ul>
            <li>
        </ul>
    </div>
</nav>
</div><!-- row -->
{% endblock navbar %}

{% block breadcrumb %}
<div class="row">
<ol class="breadcrumb">
    <li><a href="{% url 'dashboard' %}">{% trans 'Dashboard' %}</a></li>
    <li><a href="{% url 'users' target=target.id %}">{{ target.name }}</a></li>
    {% if resource.type == 'User' %}
    <li><a href="{% url 'users' target=target.id %}">{% trans 'Users' %}</a></li>
    <li><a href="{% url 'user' name=resource.name target=target.id %}">{{ resource.name }}</a></li>
    {% elif resource.type == 'Group' %}
    <li><a href="{% url 'groups' target=target.id %}">{% trans 'Groups' %}</a></li>
    <li><a href="{% url 'group' name=resource.name target=target.id %}">{{ resource.name }}</a></li>
    {% else %}
    <li><a href="{% url 'result' target=target.id %}">{% trans 'Result' %}</a></li>
    {% endif %}
    <li>{% trans 'Result' %}</li>
</ol>
</div><!-- row -->
{% endblock breadcrumb %}

<div class="row">
<div class="col-sm-push-2 col-sm-8 col-xs-12">
<h2>{% trans 'Result' %}</h2>
<table id="operation-table" width="100%">
    <thead>
        <tr>
            <th class="text-right">{% trans "Name" %}</th>
            <th><span class="label label-default">{% trans "Resource Type" %}</span></th>
            <th>{% trans "Operation Name" %}</th>
            <th>{% trans "Operation Result" %}</th>
        </tr>
    </thead>
</table>
</div> <!-- grid -->
</div> <!-- row -->

{% if resource.password %}
<div id="password-print-area" class="row">
<div class="col-sm-push-2 col-sm-8 col-xs-12">
<h2>{% trans 'Password' %}</h2>
<table class="table table-responsive">
    <thead>
        <tr>
            <th>{% trans 'userName' %}</th>
            <th>{% trans 'Password' %}</th>
            <th>{% trans 'Date of Issue' %}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{ resource.name }}</td>
            <td>{{ resource.password }}</td>
            <td>{% now 'Y/m/d H:i:s' %}</td>
        </tr>
    </tbody>
</table>
<button id="print-submit" class="button-round">{% trans 'Print' %}</button>
</div> <!-- grid -->
</div> <!-- row -->
{% endif %}


</div><!-- container-fluid -->
{% endblock content %}

{% block footer_scripts %}
{{ block.super }}
<script type="application/javascript" src="{% static 'js/password_print_area.js' %}"></script>
<script type="text/javascript" charset="utf8" src="{% static 'js/datatables.min.js' %}"></script>
<script type="text/javascript" charset="utf8" src="{% static 'js/datatables-bs.min.js' %}"></script>
<script>
function format(details) {
    {# CSSについては https://w3g.jp/blog/confusing_word-break_word-wrap 参照 #}
    function one_row(d) {
        return "<tr>" + '<td class="text-right">' + d.backend + ":</td>" +
                        '<td style="word-wrap: break-word; overflow-wrap: break-word;">' + d.message + "</td>" + "</tr>";
    }

    var retval = '<table class="table" style="table-layout: fixed; width: 80%; margin-left: auto;"><tbody>';

    for(var i in details) {
        retval += one_row(details[i]);
    }

    retval += "</tbody></table>"

    return retval;
}

$(document).ready( function () {

    data = {{ results|safe }};  {# TODO(somay, 170130): JSON をテンプレート変数として渡すのは汚すぎるので直す #}
    var table = $('#operation-table').DataTable({
        lengthChange: false,
        ordering: false,
        paging: false,
        searching: false,
        data: data,
        rowCallback: function(row, data, index) {
            if (data.status) {
                $(row).addClass('success');
            } else {
                $(row).addClass('danger');
            }
        },
        columns: [
            { data: 'name',
              className: 'text-right'
            },
            { data: 'resourceType',
              render: function(data, type, row) {
                  if ( type == 'display' ) {
                      var color = ''
                      if ( data == 'User' ) {
                          color = 'label-primary';
                      } else if (data == 'Group' ) {
                          color = 'label-success';
                      }
                      return '<span class="label ' + color + '">' + data + '</span>';
                  }
                  return data;

              }
            },
            { data: 'operation',
              className: 'text-center'
            },
            { data: 'status',
              className: 'text-center',
              render: function(data, type, row){ return data ? "OK" : "NG"; }
            }
        ]
    });
    table.rows().every(function(index) {
        var data = this.data();
        this.child(format(data.details)).show();
    });

    $('#operation-table').addClass("table table-striped")
});
</script>
{% endblock footer_scripts %}