{% import 'macro/svg.html' as SVG %}
<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          目录同步
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="javascript:show_add_sync_path_modal()" class="btn btn-primary d-none d-sm-inline-block">
            {{ SVG.plus() }}
            新增同步目录
          </a>
          <a href="javascript:show_add_sync_path_modal()" class="btn btn-primary d-sm-none btn-icon">
            {{ SVG.plus() }}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 业务页面代码 -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <div class="col-12">
        <div class="card">
          <div class="card-body border-bottom py-3">
            <div class="d-flex">
              <div class="text-muted">
                共 {{ SyncCount }} 条记录
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-vcenter card-table table-hover table-striped">
              <thead>
              <tr>
                <th>源目录</th>
                <th>目的目录</th>
                <th class="w-5 text-nowrap">同步方式</th>
                <th class="w-5 text-nowrap">识别重命名</th>
                <th class="w-5 text-nowrap">状态</th>
                <th class="w-5"></th>
              </tr>
              </thead>
              <tbody>
              {% if SyncPaths %}
                {% for SyncPath in SyncPaths %}
                  <tr>
                    <td>{{ SyncPath.from or '' }}</td>
                    <td>
                      {{ SyncPath.to or '' }}
                      {% if SyncPath.unknown and SyncPath.rename %}
                        <div class="text-muted">
                          未识别：{{ SyncPath.unknown }}
                        </div>
                      {% endif %}
                    </td>
                    <td>
                      <span class="badge">{{ SyncPath.syncmod_name }}</span>
                    </td>
                    <td>
                      <label class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" {% if SyncPath.rename==1 %} checked {% endif %}
                               onclick="check_sync_path('rename', '{{ SyncPath.id }}', this.checked)">
                      </label>
                    </td>
                    <td>
                      <label class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" {% if SyncPath.enabled==1 %} checked {% endif %}
                               onclick="check_sync_path('enable', '{{ SyncPath.id }}', this.checked)">
                      </label>
                    </td>
                    <td>
                      <div class="d-flex">
                        <a href="javascript:show_edit_sync_path_modal('{{ SyncPath.id }}')" title="编辑目录">
                          {{ SVG.edit() }}
                        </a>
                        <a href="javascript:delete_sync_path('{{ SyncPath.id }}')" title="删除目录" class="ms-2">
                          {{ SVG.x() }}
                        </a>
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="6" align="center">未配置</td>
                </tr>
              {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-directory" tabindex="-1" role="dialog" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="directory_modal_title"></h5>
        <input type="hidden" id="sync_path_id">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-9">
            <div class="mb-3">
              <label class="form-label required">同步目录 <span class="form-help"
                                                                title="源目录为需要同步的目录，目的目录为识别和改名后存放的目录，未识别目录为无法识别时转移的目录；只有源目录必须配置；目的目录未配置时将自动识别分类并转移到媒体库对应目录中；未识别目录下产生的文件程序不会主动清理，建议不配置，未识别记录可在媒体整理->手动识别功能下处理"
                                                                data-bs-toggle="tooltip">?</span></label>
              <div class="row">
                <div class="col-12 col-lg-4 mb-1">
                  <input type="text" value="" id="from_path" class="form-control filetree-folders-only"
                         placeholder="源目录" autocomplete="off">
                </div>
                <div class="col-12 col-lg-4 mb-1">
                  <input type="text" value="" id="to_path" class="form-control filetree-folders-only"
                         placeholder="目的目录"
                         autocomplete="off">
                </div>
                <div class="col-12 col-lg-4">
                  <input type="text" value="" id="unknown_path" class="form-control filetree-folders-only"
                         placeholder="未识别目录" autocomplete="off">
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="mb-3">
              <label class="form-label required">同步方式 <span class="form-help"
                                                                title="目录同步使用的文件转移方式，根据不同的程序版本可选项会有所不同。硬链接模式要求源目录和目的目录或媒体库目录在一个磁盘分区或者存储空间/共享文件夹，Docker运行时需要直接映射源目录和目的目录或媒体库目录的上级目录，否则docker仍然会认为是跨盘；移动模式会直接移动原文件，会影响做种，请谨慎使用；Rclone针对网盘场景，需要自行映射rclone配置目录到容器中（/root/.config/rclone）或在容器内使用rclone config完成rclone配置，网盘配置名称必须为：NASTOOL，可自行通过Docker添加环境变量传递参数优化传输，参考：https://rclone.org/docs/#environment-variables；Minio针对S3/云原生场景，需要自行在容器内使用mc alias set NASTOOL http://your_domain_name_or_ip:port ACCESS_KEY SECRET_KEY完成minio配置(alias的名称必须为NASTOOL)，并在minio控制台增加一个名为data的bucket(名称必须为data)"
                                                                data-bs-toggle="tooltip">?</span></label>
              <select id="syncmod_flag" class="form-select">
                {% for mode in RmtModeDict %}
                <option value="{{ mode.value }}">{{ mode.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 mb-1">
            <label class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="rename_flag" checked>
              <span class="form-check-label">识别并重命名</span>
            </label>
          </div>
          <div class="col-lg-4 mb-1">
            <label class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="enable_flag" checked>
              <span class="form-check-label">开启同步</span>
            </label>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link me-auto" data-bs-dismiss="modal">取消</button>
        <a href="javascript:add_or_edit_sync_path()" id="directory_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  // 打开新增窗口
  function show_add_sync_path_modal() {
    $("#directory_modal_title").text('新增同步目录');
    $("#sync_path_id").val('');
    $("#from_path").val('');
    $("#to_path").val('');
    $("#unknown_path").val('');
    $("#modal-directory").modal('show');
  }

  // 打开编辑窗口
  function show_edit_sync_path_modal(sid) {
    ajax_post("get_sync_path", {sid: sid}, function (ret) {
      if (ret.code == 0) {
        let sync_item = ret.data;
        $("#directory_modal_title").text('编辑同步目录');
        $("#sync_path_id").val(sid);
        $("#from_path").val(sync_item.from);
        $("#to_path").val(sync_item.to);
        $("#unknown_path").val(sync_item.unknown);
        $("#syncmod_flag").val(sync_item.syncmod);
        if (sync_item.rename == 1) {
          $("#rename_flag").prop("checked", true);
        } else {
          $("#rename_flag").prop("checked", false);
        }
        if (sync_item.enabled == 1) {
          $("#enable_flag").prop("checked", true);
        } else {
          $("#enable_flag").prop("checked", false);
        }
        $("#modal-directory").modal('show');
      } else {
        show_fail_modal(ret.msg);
      }
    });
  }

  // 新增目录
  function add_or_edit_sync_path() {
    const sid = $("#sync_path_id").val();
    const syncmod = $("#syncmod_flag").val();
    const from = $("#from_path").val();
    if (!from) {
      $("#from_path").addClass("is-invalid");
      return;
    } else {
      $("#from_path").removeClass("is-invalid");
    }
    const to = $("#to_path").val();
    const rename = $("#rename_flag").prop("checked");
    if (!rename) {
      if (!to) {
        $("#to_path").addClass("is-invalid");
        return;
      } else {
        $("#to_path").removeClass("is-invalid");
      }
    }
    const unknown = $("#unknown_path").val();
    const enabled = $("#enable_flag").prop("checked");
    const params = {
      "sid": sid,
      "from": from,
      "to": to,
      "unknown": unknown,
      "syncmod": syncmod,
      "rename": rename,
      "enabled": enabled
    };
    $("#modal-directory").modal('hide');
    ajax_post("add_or_edit_sync_path", params, function (ret) {
      if (ret.code == 0) {
        window_history_refresh();
      } else {
        show_fail_modal(ret.msg, function () {
          $("#modal-directory").modal('show');
        });
      }
    });
  }

  // 删除目录
  function delete_sync_path(sid) {
    ajax_post("delete_sync_path", {sid: sid}, function (ret) {
      if (ret.code == 0) {
        window_history_refresh();
      }
    });
  }

  // 更新目录
  function check_sync_path(flag, sid, checked) {
    ajax_post("check_sync_path", {flag: flag, sid: sid, checked: checked}, function (ret) {
      if (ret.code == 0) {
        window_history_refresh();
      }
    });
  }

</script>