<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{admin/include::head}">
</head>
<style>
:root {
  --img-width: 240px;
  --img-height: calc(var(--img-width)/16* 9);
}

.theme-list {
  padding: 18px 10px;
  background: white;
  box-shadow: 0 10px 20px 0 rgba(236, 236, 236, .86);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.theme-info {
  display: flex;
  padding: 5px;
  gap: 10px;
  border-radius: 5px;
  transition: ease-in-out .5s;
}

.theme-info.current {
  background: #fffad6;
}

.theme-operation {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.theme-detail {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  height: var(--img-height);
}

.theme-name {
  flex-shrink: 0;
}

.theme-description {
  margin-top: 4px;
  margin-bottom: 4px;
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.theme-meta {
  /* margin-top: auto; */
  flex-shrink: 0;
}

.theme-img {
  width: var(--img-width);;
  height: var(--img-height);
  flex-shrink: 0;
}

.theme-img img {
  border: 1px solid #ddd;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.theme-img-placeholder {
  width: var(--img-width);;
  height: var(--img-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #999;
  background: #f5f5f555;
  border: 1px dashed #ddd;
}
</style>
<body style="background-color: #f2f2f2">
  <ul th:replace="~{admin/include::nav}"></ul>

  <div class="manage-body">
    <div>
      <h2 class="manage-title">
        <b>主题设置</b>
      </h2>
    </div>
    <div class="layui-panel theme-list">
      <th:block th:each="theme, i : ${@themeService.getAllThemes(true)}">
        <div class="theme-info" th:attr="data-identity=${theme.identity}"
          th:classappend="${i.index == 0 ? 'current':''}">
          <div class="theme-img">
            <img
              th:if="${theme.image != null and !#strings.isEmpty(theme.image)}"
              th:src="${theme.image}" alt="主题图片" />
            <div class="theme-img-placeholder"
              th:unless="${theme.image != null and !#strings.isEmpty(theme.image)}">
              暂无图片</div>
          </div>
          <div class="theme-detail">
            <div class="theme-name">
              <b>[[${theme.name}]]</b> by <span
                th:if="${theme.link == null || #strings.isEmpty(theme.link)}">[[${theme.author}]]</span>
              <a
                th:if="${theme.link != null && !#strings.isEmpty(theme.link)}"
                th:href="${theme.link}"
                rel="nofollow noopener noreferrer">[[${theme.author}]]</a>
            </div>
            <div class="theme-description">
              <p>[[${theme.description}]]</p>
            </div>
            <div class="theme-meta">
              版本：[[${theme.version}]]<br> 类型：[[${theme.internal ?
              '自带主题' : '外部主题'}]]<br> 目录：[[${theme.folderName}]]
            </div>
          </div>
          <div class="theme-operation">
            <button class="layui-btn layui-btn-sm enable-theme" th:attr="data-identity=${theme.identity}"
              th:classappend="${i.index == 0 ? 'layui-btn-disabled':''}">启用</button>
            <button class="layui-btn layui-btn-sm layui-btn-normal extract-theme" th:attr="data-identity=${theme.identity}"
              th:classappend="${!theme.internal ? 'layui-btn-disabled':''}">导出到外部</button>
          </div>
        </div>
      </th:block>
    </div>
  </div>
  <div th:replace="~{admin/include::feet}"></div>
  <th:block th:replace="~{admin/include::head-script}"></th:block>
  <script>
  $('.theme-operation .enable-theme:not(.layui-btn-disabled)').on('click', function() {
    $.ajax({
      url: '/admin/v2/themes/setTheme',
      data: {
        identity: $(this).data('identity')
      },
      method: 'POST',
      success: function (result) {
        layer.msg('设置成功', {time:1000}, function(){
          location.reload();
        });
      },
      error: function (res) {
        var r = res.responseJSON;
        layer.msg(r&&r.data||'设置失败', {time:2000});
      }
    })
})
$('.theme-operation .extract-theme:not(.layui-btn-disabled)').on('click', function() {
  var identity = $(this).data('identity');
  var folderName = identity.split(':')[1];
  var extractTheme = function (identity) {
    $.ajax({
      url: '/admin/v2/themes/extractTheme',
      data: {
        identity: identity
      },
      method: 'POST',
      success: function (result) {
        layer.msg('导出成功', {time:1000}, function(){
          location.reload();
        });
      },
      error: function (res) {
        var r = res.responseJSON;
        layer.msg(r&&r.data||'导出失败', {time:2000});
      }
    })
  }
  if ($(`[data-identity="EXTERNAL:${folderName}"]`).length) {
    layer.confirm(
        `外部主题目录已存在目录名为 ${folderName} 的主题<br>目录，仍然导出吗？导出内容会覆盖原有内容`, 
        {title: '提示'}, function(index){
      extractTheme(identity);
    });
  }
  else {
    extractTheme(identity);
  }
})
  </script>
</body>

</html>