<div class="row">
  <div class="col-md-12">
    <sa-card name="评论详情" baCardClass="with-scroll">
      <form class="comment-form form-horizontal" [formGroup]="editForm" (ngSubmit)="submitComment()">
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">ID</label>
          <div class="col-sm-2">
            <div class="form-control">{{ comment.id }}</div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">所在文章</label>
          <div class="col-sm-5">
            <div class="form-control">
              <span *ngIf="comment.post_id !== CommentPostType.Guestbook;else guestbookTitle">{{ article ? article.title : '未知文章' }}</span>
              <ng-template #guestbookTitle><span>留言板</span></ng-template>
            </div>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(likes)">
          <label for="comment-likes" class="col-sm-1 form-control-label text-right">喜欢人数</label>
          <div class="col-sm-2">
            <input
              type="number"
              id="comment-likes"
              class="form-control"
              placeholder="喜欢人数"
              [formControl]="likes"
            />
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(is_top)">
          <label for="comment-is-top" class="col-sm-1 form-control-label text-right">是否置顶</label>
          <div class="col-sm-2">
            <select class="form-control" id="comment-is-top" [formControl]="is_top">
              <option [ngValue]="false">不置顶</option>
              <option [ngValue]="true">置顶</option>
            </select>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(state)">
          <label for="comment-state" class="col-sm-1 form-control-label text-right">状态</label>
          <div class="col-sm-2">
            <select class="form-control" id="comment-state" [formControl]="state">
              <option [ngValue]="CommentState.Spam">垃圾评论</option>
              <option [ngValue]="CommentState.Deleted">已删除</option>
              <option [ngValue]="CommentState.Auditing">待审核</option>
              <option [ngValue]="CommentState.Published">审核通过</option>
            </select>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(user_name)">
          <label for="comment-user-name" class="col-sm-1 form-control-label text-right">用户名</label>
          <div class="col-sm-2">
            <input
              type="text"
              id="comment-user-name"
              class="form-control"
              placeholder="用户名"
              [formControl]="user_name"
            />
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(user_email)">
          <label for="comment-user-email" class="col-sm-1 form-control-label text-right">用户邮箱</label>
          <div class="col-sm-2">
            <input
              type="email"
              id="comment-user-email"
              class="form-control"
              placeholder="用户邮箱"
              [formControl]="user_email"
            />
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(user_site)">
          <label for="comment-user-site" class="col-sm-1 form-control-label text-right">用户地址</label>
          <div class="col-sm-2">
            <input
              type="url"
              id="comment-user-site"
              class="form-control"
              placeholder="用户的个人网址"
              [formControl]="user_site"
            />
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">创建时间</label>
          <div class="col-sm-2">
            <div class="form-control">{{ comment.create_at | dataToLocale }}</div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-1 form-control-label text-right">客户端信息</label>
          <div class="col-sm-5">
            <div class="form-control">
              <span *ngIf="comment.ip;else unknowIp">{{ comment.ip }}</span>
              <ng-template #unknowIp>
                <span class="text-muted">未知ip</span>
              </ng-template>
            </div>
            <br>
            <div class="form-control">
              <span *ngIf="comment.ip_location;else unknowIpLocation">{{ comment.ip_location.country }}{{ comment.ip_location.city }}</span>
              <ng-template #unknowIpLocation>
                <span class="text-muted">未知物理地址</span>
              </ng-template>
            </div>
            <br>
            <div class="form-control">
              <span>操作系统：</span>
              <span *ngIf="comment.agent" [innerHTML]="osParser(comment.agent)"></span>
            </div>
            <br>
            <div class="form-control">
              <span>浏览器：</span>
              <span *ngIf="comment.agent;else unknowUa">{{ browserParser(comment.agent) }}</span>
              <ng-template #unknowUa>
                <span class="text-muted">未知设备</span>
              </ng-template>
            </div>
          </div>
        </div>
        <div class="form-group row" [ngClass]="controlStateClass(pid)">
          <label for="PID" class="col-sm-1 form-control-label text-right">父级评论</label>
          <div class="col-sm-5">
            <select class="form-control" [formControl]="pid">
              <option default [value]="0">无父级评论</option>
              <ng-template [ngIf]="comment.id && comments && comments.data.length">
                <option
                  *ngFor="let item of comments.data"
                  [ngValue]="item.id"
                  [disabled]="item.id === comment.id"
                >
                  <span>ID：{{ item.id }}  -  {{ item.author.name }}：{{ item.content | truncate : 160 }}</span>
                </option>
              </ng-template>
            </select>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(content)">
          <label for="comment-content" class="col-sm-1 form-control-label text-right">内容</label>
          <div class="col-sm-5">
            <sa-markdown-editor
              class="form-control comemnt-content"
              title="评论内容"
              id="comment-content"
              [formControl]="content"
            ></sa-markdown-editor>
          </div>
        </div>
        <div  class="form-group row" [ngClass]="controlStateClass(extends)">
          <label for="comment_extends" class="col-sm-1 form-control-label text-right">自定义扩展</label>
          <div class="col-sm-5">
            <div class="input-group" *ngFor="let extend of extends.value; let i = index">
              <input
                type="text"
                id="comment-name"
                class="form-control"
                placeholder="key"
                [(ngModel)]="extend.name"
                [ngModelOptions]="{ standalone: true }"
              />
              <input
                type="text"
                id="comment-name"
                class="form-control"
                placeholder="value"
                [(ngModel)]="extend.value"
                [ngModelOptions]="{ standalone: true }"
              />
              <div class="input-group-append">
                <button class="btn btn-default" (click)="delExtendItem(i)">
                  <ion-icon class="icon" name="trash"></ion-icon>
                </button>
              </div>
            </div>
            <button
              type="button"
              class="btn btn-default btn-sm btn-block btn-with-icon"
              (click)="addExtendItem()"
            >
              <ion-icon class="icon" name="add"></ion-icon>
              <span>增加扩展</span>
            </button>
            <span class="help-block sub-little-text">可以为当前评论扩展自定义扩展属性</span>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-sm-1"></div>
          <div class="col-sm-11">
            <button
              type="submit"
              class="btn btn-success btn-with-icon action-btn"
              [disabled]="!editForm.valid || isDisabledAction"
            >
              <ion-icon class="icon" name="cloud-upload"></ion-icon>
              <span>提交更改</span>
            </button>
            <button
              class="btn btn-info btn-with-icon action-btn"
              [disabled]="isDisabledAction"
              (click)="getCommentDetail()"
            >
              <ion-icon class="icon" name="refresh"></ion-icon>
              <span>刷新评论</span>
            </button>
            <a
              class="btn btn-default btn-with-icon action-btn"
              *ngIf="comment.post_id !== undefined && comment.post_id !== null"
              [routerLink]="['/comment/post/', comment.post_id]"
            >
              <ion-icon class="icon" name="arrow-undo"></ion-icon>
              <span>回到宿主页面评论列表</span>
            </a>
          </div>
        </div>
      </form>
    </sa-card>
  </div>
</div>
