{{template "base/head" .}}
<style>
  .selectcloudbrain .active.item {
    color: #0087f5 !important;
    border: 1px solid #0087f5;
    margin: -1px;
    background: #FFF !important;
  }



  .dataset_title {
    font-size: 14px;
    max-width: 80%;
    display: inline-block !important;
    margin-left: 6px !important;
    padding-right: 0 !important;
  }

  .wrapper {
    display: flex;
    overflow: hidden;
    padding: 0 1rem;
  }

  .exp {
    display: none;
  }

  .exp:checked+.text {
    max-height: none;
  }

  .exp:checked+.text::after {
    visibility: hidden;
  }

  .exp:checked+.text .btn::before {
    visibility: hidden;
  }

  .exp:checked+.text .btn::after {
    content:'{{$.i18n.Tr "org.fold"}}'
  }

  .wrapper>.text {
    font-family: SourceHanSansSC-regular;
    font-size: 14px;
    color: #101010;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    position: relative;
    line-height: 1.5;
    max-height: 3em;
    transition: .3s max-height;
    word-wrap: break-word;
    word-break: break-all;
  }

  .wrapper>.text::before {
    content: '';
    height: calc(100% - 20px);
    float: right;
  }

  .wrapper>.text::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    margin-left: -100px;
  }

  .btn {
    position: relative;
    float: right;
    clear: both;
    margin-left: 20px;
    font-size: 14px;
    padding: 0 8px;
    background: #3F51B5;
    line-height: 20px;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    /* margin-top: -30px; */
  }

  .btn::after {
    content:'{{$.i18n.Tr "org.unfold"}}'
  }

  .btn::before {
    content: '...';
    position: absolute;
    left: -5px;
    color: #333;
    transform: translateX(-100%)
  }

  .el-button--text {
    color: #0366d6;
  }

  .heart-stroke {
    stroke: #FA8C16;
    stroke-width: 2;
    fill: #fff
  }

  .stars_active {
    fill: #FA8C16 !important;
    stroke: #FA8C16 !important
  }

  .diy-popper {
    max-width: 400px;
  }

  .ascending {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: #c0c4cc;
  }

  .descending {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #c0c4cc;
  }
</style>
<div class="repository">
  {{template "repo/header" .}}
  {{if .dataset}}
  <div id="dataset-range-value" data-num-stars="{{.dataset.NumStars}}" data-star-active="{{$.IsStaringDataset}}"
    style="display: none;">
    {{range .Attachments}}
    <div class="item" data-private="{{.IsPrivate}}" data-decompress-state="{{.DecompressState}}"></div>
    {{end}}
  </div>

  <div id="dataset-base">
    <div class="ui container">
      <div class="ui mobile reversed stackable grid">
        <div class="row">
          <div class="column thirteen wide">
            <h2 class="nowrap">{{.dataset.Title}}</h2>
          </div>
          <div class="column three wide right aligned">
            <span style="display: flex;align-items: center;justify-content: flex-end;height: 36px;">
              {{if $.IsSigned}}
              <div style="line-height: 1;margin-right: 4px;margin-bottom: -2px;padding: 0 10px;"
                @click="postStar({{.dataset.ID}},'{{.Link}}')">
                <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"
                  :class='{stars_active:star_active}'>
                  <path
                    d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z">
                  </path>
                </svg>
              </div>
              <span style="line-height: 1;">${num_stars}</span>
              {{else}}
              <div style="line-height: 1;margin-right: 4px;margin-bottom: -2px;padding: 0 10px;">
                <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"
                  :class='{stars_active:star_active}'>
                  <path
                    d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z">
                  </path>
                </svg>
              </div>
              <span style="line-height: 1;">${num_stars}</span>
              {{end}}
              <a style="margin-left:30px;" href="{{.RepoLink}}/datasets/edit/{{.dataset.ID}}"
                class="ui primary basic mini {{if not $.CanWrite}} disabled {{end}} button">{{.i18n.Tr "repo.modelarts.modify"}}</a>
            </span>
          </div>
          {{if or (.dataset.Category) (.dataset.Task) (.dataset.License)}}
          <div class="column thirteen wide">
            {{if .dataset.Category}}
            {{$category := .dataset.Category}}
            <a class="ui repo-topic label topic"
              href="{{AppSubUrl}}/explore/datasets?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{.dataset.Category}}&task={{$.Task}}&license={{$.License}}">{{$.i18n.Tr (printf "dataset.category.%s" $category)}}</a>
            {{end}}
            {{if .dataset.Task}}
            {{$task := .dataset.Task}}
            <a class="ui repo-topic label topic"
              href="{{AppSubUrl}}/explore/datasets?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{$.Category}}&task={{.dataset.Task}}&license={{$.License}}">{{$.i18n.Tr (printf "dataset.task.%s" $task)}}</a>
            {{end}}
            {{if .dataset.License}}
            <a class="ui repo-topic label topic"
              href="{{AppSubUrl}}/explore/datasets?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{$.Category}}&task={{$.Task}}&license={{.dataset.License}}">{{.dataset.License}}</a>
            {{end}}
          </div>
          {{end}}
        </div>
        {{if .dataset.Description}}
        <div class="row" style="padding-top: 0;">
          <div class=" wrapper">
            <input id="exp1" class="exp" type="checkbox">
            <div class="text">
              <label class="btn" for="exp1"></label>
              {{.dataset.Description}}
            </div>
          </div>
        </div>
        {{end}}
        <div class="row">
          <div class="column ten wide"></div>
          <div class="column six wide right aligned">
            <el-select v-model="datasetType" style="width: 40%;" size="small" @change="changeDatasetType">
              <i slot="prefix" style="display: inline-block;color: #101010;"
                class="el-input__icon ri-archive-drawer-line"></i>
              <el-option label="{{$.i18n.Tr "repo.gpu_type_all"}}" value="-1"></el-option>
              <el-option label="CPU/GPU" value="0"></el-option>
              <el-option label="NPU" value="1"></el-option>
            </el-select>
            <el-button icon="el-icon-upload" {{if not $.CanWrite}} disabled {{end}} type="primary" size="small"
              @click="gotoUpload('{{.RepoLink}}',{{.dataset.ID}})">{{$.i18n.Tr "dataset.dataset_upload"}}</el-button>
          </div>
        </div>
        <div class="row">
          <div class="ui sixteen wide column dataset">
            <div class="ui grid stackable" style="background: #f0f0f0;;">
              <div class="row">
                <!-- 数据集名称 -->
                <div class="four wide column name_sort" @click="sortAble('name')"
                  style="width: 24% !important;cursor: pointer;">
                  {{$.i18n.Tr "dataset.dataset_file_name"}}
                  <span class="caret-wrapper">
                    <i class='ascending sort-caret-up {{if eq .SortType "nameAsc"}} active-up-sort {{end}}'
                      @click.stop="sortIcon('name','up')"></i>
                    <i class='descending sort-caret-down {{if eq .SortType "nameDesc"}} active-down-sort {{end}}'
                      @click.stop="sortIcon('name','down')"></i>
                  </span>
                </div>
                <div class="one wide column text center size_sort" @click="sortAble('size')"
                  style="width: 7.25% !important;cursor: pointer;">
                  {{$.i18n.Tr "repo.model.manage.size"}}
                  <span class="caret-wrapper">
                    <i class='ascending sort-caret-up {{if eq .SortType "sizeAsc"}} active-up-sort {{end}}'
                      @click.stop="sortIcon('size','up')"></i>
                    <i class='descending sort-caret-down {{if eq .SortType "sizeDesc"}} active-down-sort {{end}}'
                      @click.stop="sortIcon('size','down')"></i>
                  </span>
                </div>
                <div class="two wide column text center">
                  {{$.i18n.Tr "dataset.dataset_available_clusters"}}
                </div>
                <div class="one wide column text center">
                  {{$.i18n.Tr "repo.modelarts.status"}}
                </div>
                <div class="one wide column text center">
                  {{$.i18n.Tr "repo.cloudbrain_creator"}}
                </div>
                <div class="three wide column text center" @click="sortAble('time')" style="cursor: pointer;">
                  {{$.i18n.Tr "dataset.dataset_upload_time"}}
                  <span class="caret-wrapper">
                    <i class='ascending sort-caret-up {{if eq .SortType "timeAsc"}} active-up-sort {{end}}'
                      @click.stop="sortIcon('time','up')"></i>
                    <i class='descending sort-caret-down {{if eq .SortType "timeDesc"}} active-down-sort {{end}}'
                      @click.stop="sortIcon('time','down')"></i>
                  </span>
                </div>
                <div class="four wide column text center">
                  {{$.i18n.Tr "repo.cloudbrain_operate"}}
                </div>
              </div>
            </div>
            {{range $k, $v :=.Attachments}}
            <div class="ui grid stackable item" id="{{.UUID}}">
              <div class="row">
                <!-- 数据集名称 -->

                <div class="four wide column" style="width: 24% !important;display: flex;align-items: center;">
                  <el-tooltip class="item" effect="dark" placement="top" popper-class="diy-popper">
                    <div slot="content"><span class="wrap">

                        {{$.i18n.Tr "dataset.unzip_status"}}：{{if eq .DecompressState 1}}{{$.i18n.Tr "dataset.unzip_successed"}}{{else if eq .DecompressState 0}}{{$.i18n.Tr "dataset.unzip_stared"}}{{else}}{{$.i18n.Tr "dataset.unzip_failed"}}{{end}}
                        &nbsp;&nbsp;<i class="ri-download-line"></i>{{$.i18n.Tr "dataset.download"}}：{{.DownloadCount}}
                        {{if .Description}}&nbsp;&nbsp;{{$.i18n.Tr "dataset.description"}}：{{.Description}}{{end}}</span>
                    </div>

                    <div style="border: none;display: flex;align-items: center;max-width: 100%;">
                      {{.DecompressState}}
                      {{if eq .DecompressState 1}}
                      <i class="ri-folder-open-line" style="color: #5bb973;"
                        title='{{$.i18n.Tr "dataset.unzip_successed"}}'></i>
                      {{else if eq .DecompressState 0}}
                      <i class="ri-folder-chart-2-line" style="color: #888888;"
                        title='{{$.i18n.Tr "dataset.unzip_stared"}}'></i>
                      {{else}}
                      <i class="ri-folder-forbid-line" style="color: #101010;"
                        title='{{$.i18n.Tr "dataset.unzip_failed"}}'></i>
                      {{end}}
                      <a class="dataset_title title" href="{{.DownloadURL}}" title="{{.Name}}">
                        {{.Name}}
                      </a>
                      <i class="ri-lock-2-line" style="color: #fa8c16;" v-if="privates[{{$k}}]"></i>
                    </div>
                  </el-tooltip>
                </div>
                <div class="one wide column text center" style="width: 7.25% !important;">
                  {{.Size | FileSize}}
                </div>
                <div class="two wide column text center">
                  {{.Type | AttachmentResourceType}}
                </div>
                <div class="one wide column text center">
                  {{$x:=.IsPrivate | AttachmentStatus}}
                  <span style="color: #fa8c16;" v-if="privates[{{$k}}]">{{$.i18n.Tr "home.show_private"}}</span>
                  <span style="color: #13c28d;"
                    v-else="privates[{{$k}}]">{{$.i18n.Tr "org.settings.visibility.public"}}</span>
                </div>
                <div class="one wide column text center">
                  {{if .Uploader.Name}}
                  <a href="{{AppSubUrl}}/{{.Uploader.Name}}" title="{{.Uploader.Name}}"><img class="ui avatar image"
                      src="{{AppSubUrl}}/user/avatar/{{.Uploader.Name}}/-1"></a>
                  {{else}}
                  <a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>
                  {{end}}
                </div>
                <div class="three wide column text center">
                  {{.CreatedUnix | TimeSinceUnix1}}
                </div>
                <div class="four wide column text right">
                  <!-- <el-button type="text">下载</el-button>
                          <el-button type="text">预览</el-button>
                          <el-button type="text">标注</el-button>
                          <el-button type="text">
                            <el-popover
                            placement="right"
                            width="400"
                            trigger="click">
                            <span>asdasd</span>
                            <el-button slot="reference" type="text"><i class="ri-more-line"></i></el-button>
                            </el-popover>
                          </el-button> -->
                  <div class="ui compact buttons">

                    <a class="ui basic blue button" href="{{.DownloadURL}}">{{$.i18n.Tr "dataset.download"}}</a>

                    {{if eq .DecompressState 1}}
                    <a class="ui basic blue button" href="datasets/dirs/{{.UUID}}?type={{$.Type}}"
                      data-tooltip='{{$.i18n.Tr "dataset.directory"}}'>{{$.i18n.Tr "preview"}}</a>
                    {{end}}
                    {{if and (.CanDel) (not $.Repository.IsPrivate)}}
                    <span class="ui basic blue button" style="color: #13c28d !important;"
                      @click="setPrivate('{{.UUID}}',false,{{$k}})"
                      v-if="privates[{{$k}}]">{{$.i18n.Tr "dataset.set_public"}}</span>
                    <span class="ui basic blue button" style="color: #fa8c16 !important;"
                      @click="setPrivate('{{.UUID}}',true,{{$k}})"
                      v-else="privates[{{$k}}]">{{$.i18n.Tr "dataset.set_private"}}</span>
                    {{end}}
                    <!-- {{if $.CanRead}}
                              <a class="ui basic blue button" href="datasets/label/{{.UUID}}?type={{$.Type}}" data-tooltip='{{$.i18n.Tr "dataset.create_label_task"}}'>标注</a>
                              {{else}}
                              <a class="ui basic disabled  button">标注</a>
                              {{end}} -->
                    <a class="ui basic blue button">
                      <el-dropdown size="medium">
                        <span class="el-dropdown-link">
                          {{$.i18n.Tr "repo.more"}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="copyUrl('{{.DownloadURL}}')">{{$.i18n.Tr "dataset.copy_url"}}
                          </el-dropdown-item>
                          <!-- <el-dropdown-item class="clipboard" data-clipboard-text="{{.Md5}}" data-clipboard-action="copy">{{$.i18n.Tr "dataset.copy_md5"}}</el-dropdown-item>-->
                          {{if and ($.CanWrite) (eq .DecompressState 1) }}
                          <el-dropdown-item @click.native="gotoAnnotate('{{$.RepoLink}}','{{.UUID}}',{{.Type}})">
                            {{$.i18n.Tr "dataset.annotation"}}</el-dropdown-item>
                          {{end}}
                          {{if .CanDel}}
                          <el-dropdown-item @click.native="gotoDatasetEidt('{{$.RepoLink}}',{{.ID}})">
                            {{$.i18n.Tr "dataset.modify_description"}}</el-dropdown-item>
                          <el-dropdown-item style="color: red;" @click.native="delDataset('{{.UUID}}')">
                            {{$.i18n.Tr "dataset.delete"}}</el-dropdown-item>
                          {{end}}
                        </el-dropdown-menu>
                      </el-dropdown>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            {{end}}

          </div>

        </div>

      </div>
    </div>
  </div>
  <div id="app" style="margin-top: 2rem;">
    <div class="center">
      <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10]"
        :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="{{.Page.Paginater.Total}}">
      </el-pagination>
    </div>
  </div>
  {{else}}
  <div class="ui placeholder segment bgtask-none">
    <div class="ui icon header bgtask-header-pic"></div>
    <div class="bgtask-content-header">{{.i18n.Tr "dataset.dataset_no_create"}}</div>
    {{if $.CanWrite}}
    <a class="ui green button" href="{{.RepoLink}}/datasets/create">{{.i18n.Tr "dataset.create_new_dataset"}}</a>
    {{end}}
    <div class="bgtask-content">
      <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_explain"}}</div>
      <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_instructions_for_use"}}<a
          href="https://git.openi.org.cn/zeizei/OpenI_Learning">{{.i18n.Tr "dataset.dataset_camp_course"}}</a></div>
    </div>
  </div>
  {{end}}
</div>

<div class="ui small basic delete modal" id="data-dataset-delete-modal">
  <div class="ui icon header">
    <i class="trash icon"></i>
    {{.i18n.Tr "dataset.attachment.delete"}}
  </div>
  <div class="content">
    <p>{{.i18n.Tr "dataset.attachment.delete_desc" | Str2html}}</p>
  </div>
  {{template "base/delete_modal_actions" .}}
</div>
{{template "base/footer" .}}