{% extends '../layout/admin.html' %}

{% block html_title %}グループ管理 · {% endblock %}

{% block content_head %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">グループ管理(グループ詳細)</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">
  {% set smessage = req.flash('successMessage') %}
  {% if smessage.length %}
  <div class="alert alert-success">
    {{ smessage }}
  </div>
  {% endif %}

  {% set emessage = req.flash('errorMessage') %}
  {% if emessage.length %}
  <div class="alert alert-danger">
    {{ emessage }}
  </div>
  {% endif %}

  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'user-group'} %}
    </div>

    <div class="col-md-9">
          <a href="/admin/user-groups"><i class="fa fa-arrow-left"></i> グループ一覧に戻る</a>

      <div class="modal fade" id="admin-add-user-group-relation-modal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">
                グループにユーザを追加します</h4>
            </div>

            <div class="modal-body">
              <p>
                ユーザ名を入力してください。
              </p>
              <form class="form-inline" role="form" action="/admin/user-group-relation/create" method="post">
                <div class="form-group">
                  <label for="inputRelatedUserName">Add related user:</label>
                  <input type="text" name="user_name" class="form-control input-sm" id="inputRelatedUserName" placeholder="username">
                </div>
                <input type="hidden" name="user_group_id" value="{{userGroup.id}}">
                <input type="hidden" name="_csrf" value="{{ csrf() }}">
                <button type="submit" class="btn btn-sm btn-danger">実行</button>
              </form>

              {% if 0 < notRelatedusers.length %}
              <hr>
              <p>
                ユーザ名を選択してください。
              </p>

              <ul class="list-inline">
                {% for sUser in notRelatedusers %}
                <li>
                  <form role="form" action="/admin/user-group-relation/create" method="post">
                    <!-- <input type="hidden" name="user_name" value="{{sUser.username}}"> -->
                    <input type="hidden" name="user_group_id" value="{{userGroup.id}}">
                    <input type="hidden" name="_csrf" value="{{ csrf() }}">
                    <button type="submit" name="user_name" value="{{sUser.username}}" class="btn btn-xs btn-primary">{{sUser.username}}</button>
                  </form>
                </li>
                {% endfor %}
              </ul>
              {% endif %}

            </div>

          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>

      <div class="form-box">
        <form action="/admin/user-group/{{userGroup.id}}/update" method="post" class="form-horizontal" role="form">
          <fieldset>
            <legend>基本情報</legend>
            <div class="form-group">
              <label for="name" class="col-sm-2 control-label">{{ t('Name') }}</label>
              <div class="col-sm-4">
                <input class="form-control" type="text" name="name" value="{{ userGroup.name }}" required>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">{{ t('Created') }}</label>
              <div class="col-sm-4">
                <input class="form-control" type="text" disabled value="{{userGroup.createdAt|date('Y-m-d', sRelation.relatedUser.createdAt.getTimezoneOffset()) }}">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <input type="hidden" name="_csrf" value="{{ csrf() }}">
                <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>

      <div class="form-box">
        <fieldset>
          <legend>グループ画像の設定</legend>
          <div class="form-group col-sm-8">
            <h4>
              {{ t('Upload Image') }}
            </h4>
            <div class="form-group">
              <div id="pictureUploadFormMessage"></div>
              <label for="" class="col-sm-4 control-label">
                {{ t('Current Image') }}
              </label>
              <div class="col-sm-8">
                <p>
                  <img src="{{ userGroup|uploadedpicture }}" width="64" id="settingUserPicture">
                  <br>
                </p>
                <p>
                  {% if userGroup.image %}
                  <form action="/admin/user-group/{{userGroup.id}}/picture/delete" method="post" class="form-horizontal" role="form" onsubmit="return window.confirm('{{ t('Delete this image?') }}');">
                    <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
                  </form>
                  {% endif %}
                </p>
              </div>
            </div><!-- /.form-group -->

            <div class="form-group">
              <label for="" class="col-sm-4 control-label">
                {{ t('Upload new image') }}
              </label>
              <div class="col-sm-8">
                {% if isUploadable() %}
                <form action="/_api/admin/user-group/{{userGroup.id}}/picture/upload" id="pictureUploadForm" method="post" class="form-horizontal" role="form" enctype="multipart/form-data">
                  <input name="userGroupPicture" type="file" accept="image/*">
                  <div id="pictureUploadFormProgress">
                  </div>
                </form>
                {% else %} * {{ t('page_me.form_help.profile_image1') }}
                <br> * {{ t('page_me.form_help.profile_image2') }}
                <br> {% endif %}
              </div>
            </div><!-- /.form-group -->

          </div><!-- /.col-sm- -->

        </fieldset>
      </div><!-- /.form-box -->

      <legend>ユーザー一覧</legend>

      <table class="table table-hover table-striped table-bordered table-user-list">
        <thead>
          <tr>
            <th width="100px">#</th>
            <th>
              <code>username</code>
            </th>
            <th>名前</th>
            <th width="100px">作成日</th>
            <th width="150px">最終ログイン</th>
            <th width="90px">操作</th>
          </tr>
        </thead>
        <tbody>
          {% for sRelation in userGroupRelations %}
          {% set sUser = sRelation.relatedUser%}
          <tr>
            <td>
              <img src="{{ sRelation.relatedUser|picture }}" class="picture picture-rounded" />
            </td>
            <td>
              <strong>{{ sRelation.relatedUser.username }}</strong>
            </td>
            <td>{{ sRelation.relatedUser.name }}</td>
            <td>{{ sRelation.relatedUser.createdAt|date('Y-m-d', sRelation.relatedUser.createdAt.getTimezoneOffset()) }}</td>
            <td>
              {% if sRelation.relatedUser.lastLoginAt %} {{ sRelation.relatedUser.lastLoginAt|date('Y-m-d H:i', sRelation.relatedUser.createdAt.getTimezoneOffset()) }} {% endif %}
            </td>
            <td>
              <div class="btn-group admin-user-menu">
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                  編集
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li class="dropdown-header">編集メニュー</li>
                  <li class="divider"></li>
                  <li class="dropdown-button">
                    <form action="/admin/user-group-relation/{{userGroup.name}}/remove-relation/{{ sRelation._id.toString() }}" method="post">
                      <input type="hidden" name="_csrf" value="{{ csrf() }}">
                      <button type="submit" class="btn btn-block btn-danger">グループから外す</button>
                    </form>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          {% endfor %}

          {% if 0 < notRelatedusers.length %}
          <tr>
            <td></td>
            <td><button type="button" class="btn btn-primary" data-target="#admin-add-user-group-relation-modal" data-toggle="modal"><i class="fa fa-plus"></i></button></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          {% endif %}
        </tbody>
      </table>

      <!-- {% include '../widget/pager.html' with {path: "/admin/user-group-detail", pager: pager} %} -->

      <legend>ページ一覧</legend>

      {% if pageGroupRelations.length == 0 %}<p>グループが閲覧権限を保有するページはありません</p>{% endif %}
      {% include '../widget/page_list.html' with { pages: pageGroupRelations, pagePropertyName: 'targetPage' } %}

    </div>
  </div>
</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock content_footer %}