<template>
  <div>
    <div class="wcc-loader-view" style="min-height: 400px" v-if="loading">
      <p class="wcc-loading-text">
        <loader />
        {{ $i18n.__("Loading...", "webtoffee-cookie-consent") }}
      </p>
    </div>
    <div
      class="wcc-section wcc-advanced-section wcc-zero--padding wcc-zero--margin"
      v-else
    >
      <div class="wcc-advanced-section-content">
        <div class="wcc-section-content">
          <div class="wcc-row wcc-banner-selector-section">
            <div class="wcc-col-8 wcc-align-center wcc-section-header-title">
              {{ $i18n.__("Advanced", "webtoffee-cookie-consent") }}
            </div>
          </div>
          <div class="wcc-advanced-details-wrap wcc-col-12">
            <RenewNotice />
            <div class="wcc-renew-consent-wrap">
              <div class="wcc-renew-consent-row">
                <div class="wcc-renew-consent-title-wrap">
                  <label
                    for="wcc-renew-consent"
                    class="wcc-renew-consent-title wcc-title-label"
                    id="wcc-renew-consent-title"
                  >
                    {{
                      $i18n.__(
                        "Renew user consent",
                        "webtoffee-cookie-consent"
                      )
                    }}
                  </label>
                </div>
                <div class="wcc-renew-consent-btn-wrap">
                  <button
                    class="wcc-button-red wcc-renew-consent-btn"
                    @click="showModal('renew')"
                    :disabled="renewing"
                    :data-test-id="`wcc-renew-consent-button`"
                  >
                    {{ $i18n.__("Renew now", "webtoffee-cookie-consent") }}
                  </button>
                </div>
              </div>
              <div
                class="wcc-renew-consent-date-row"
                v-if="renewedDateFormatted !== ''"
              >
                <label
                  for="wcc-renew-consent-date"
                  class="wcc-renew-consent-date wcc-title-label"
                  id="wcc-renew-consent-date-title"
                >
                  {{
                    $i18n.__("Last renewed : ", "webtoffee-cookie-consent")
                  }}
                  {{ renewedDateFormatted }}
                </label>
              </div>
            </div>
            <div class="wcc-reset-settings-wrap">
              <div class="wcc-reset-settings-row">
                <div class="wcc-reset-settings-title-wrap">
                  <label
                    for="wcc-reset-settings"
                    class="wcc-reset-settings-title wcc-title-label"
                    id="wcc-reset-settings-title"
                  >
                    {{
                      $i18n.__(
                        "Reset to plugin default settings",
                        "webtoffee-cookie-consent"
                      )
                    }}
                  </label>
                </div>
                <div class="wcc-reset-settings-btn-wrap">
                  <button
                    class="wcc-button-red wcc-reset-settings-btn"
                    @click="showModal('reset')"
                    :disabled="resetting"
                    :data-test-id="`wcc-reset-settings-button`"
                  >
                    {{ $i18n.__("Reset", "webtoffee-cookie-consent") }}
                  </button>
                </div>
              </div>
            </div>
            <div class="wcc-export-import-cookie-wrap">
              <div class="wcc-export-import-cookie-title">
                <div class="wcc-export-import-cookie-header">
                  <label
                    for="wcc-export-import-cookie"
                    class="wcc-export-import-cookie-title wcc-title-label"
                    id="wcc-export-import-cookie-title"
                  >
                    {{
                      $i18n.__(
                        "Export/Import Cookies",
                        "webtoffee-cookie-consent"
                      )
                    }}
                  </label>
                </div>
                <div class="wcc-export-import-cookie-subtitle">
                  <p
                    v-html="
                      $i18n.__(
                        'Use this tool to export cookies listed in the <b>Manage cookies</b> section or import cookies from a saved file.',
                        'webtoffee-cookie-consent'
                      )
                    "
                  ></p>
                </div>
              </div>
              <div class="wcc-export-cookie-row">
                <div class="wcc-export-cookie-title-wrap">
                  <label
                    for="wcc-export-cookie"
                    class="wcc-export-cookie-title wcc-title-label"
                    id="wcc-export-cookie-title"
                  >
                    {{ $i18n.__("Export", "webtoffee-cookie-consent") }}
                  </label>
                </div>
                <div class="wcc-export-cookie-btn-wrap">
                  <base-button
                    class="wcc-button wcc-button-outline-blue wcc-export-cookie-btn"
                    ref="wccButtonExportCookieList"
                    @click.native="exportCookies"
                    :data-test-id="`wcc-export-cookies-button`"
                  >
                    {{ $i18n.__("Export cookies", "webtoffee-cookie-consent") }}
                  </base-button>
                  <p
                    class="wcc-export-cookie-note wcc-import-export-cookie-help"
                  >
                    {{
                      $i18n.__(
                        "Download cookie list as a CSV file.",
                        "webtoffee-cookie-consent"
                      )
                    }}
                  </p>
                </div>
              </div>
              <div class="wcc-import-cookie-row">
                <div class="wcc-import-cookie-title-wrap">
                  <label
                    for="wcc-import-cookie"
                    class="wcc-import-cookie-title wcc-title-label"
                    id="wcc-import-cookie-title"
                  >
                    {{ $i18n.__("Import", "webtoffee-cookie-consent") }}
                  </label>
                </div>
                <div class="wcc-import">
                  <div class="wcc-upload-section">
                    <label
                      :class="[
                        'wcc-button',
                        'wcc-button-light-blue-outline-dashed',
                        { 'wcc-file-selected': selectedFile },
                      ]"
                      :data-test-id="`wcc-import-cookies-upload-button`"
                    >
                      {{
                        fileName ||
                        $i18n.__("Upload file", "webtoffee-cookie-consent")
                      }}
                      <input
                        type="file"
                        accept=".csv"
                        class="wcc-upload-input"
                        @change="handleFileSelect('cookies', $event)"
                        style="display: none"
                        :data-test-id="`wcc-import-cookies-input-file`"
                      />
                    </label>
                    <p
                      class="wcc-import-cookie-note wcc-import-export-cookie-help"
                    >
                      {{
                        $i18n.__(
                          "Upload a CSV file to update your cookie list.",
                          "webtoffee-cookie-consent"
                        )
                      }}
                    </p>
                  </div>
                  <div class="wcc-import-button-wrap" v-if="selectedFile">
                    <base-button
                      class="wcc-button wcc-button-outline-blue wcc-import-cookie-btn"
                      @click.native="importFile('cookies')"
                      ref="wccButtonImportCookieList"
                      :data-test-id="`wcc-import-cookies-button`"
                    >
                      {{
                        $i18n.__("Import Cookies", "webtoffee-cookie-consent")
                      }}
                    </base-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="wcc-import-export-settings-wrap">
              <div class="wcc-import-export-settings-title">
                <div class="wcc-import-export-settings-header">
                  <label
                    for="wcc-import-export-settings"
                    class="wcc-import-export-settings-title wcc-title-label"
                    id="wcc-import-export-settings-title"
                  >
                    {{
                      $i18n.__(
                        "Export/Import Settings",
                        "webtoffee-cookie-consent"
                      )
                    }}
                  </label>
                </div>
              </div>
              <div class="wcc-export-settings-row">
                <div class="wcc-export-settings-title-wrap">
                  <label
                    for="wcc-export-settings"
                    class="wcc-export-settings-title wcc-title-label"
                    id="wcc-export-settings-title"
                  >
                    {{ $i18n.__("Export", "webtoffee-cookie-consent") }}
                  </label>
                </div>
                <div class="wcc-export-settings-btn-wrap">
                  <base-button
                    class="wcc-button wcc-button-outline-blue wcc-export-settings-btn"
                    ref="wccButtonExportSettings"
                    @click.native="exportSettings"
                    :data-test-id="`wcc-export-settings-button`"
                  >
                    {{
                      $i18n.__("Export Settings", "webtoffee-cookie-consent")
                    }}
                  </base-button>
                  <p
                    class="wcc-export-settings-note wcc-import-export-settings-help"
                  >
                    {{
                      $i18n.__(
                        "Download settings as a JSON file.",
                        "webtoffee-cookie-consent"
                      )
                    }}
                  </p>
                </div>
              </div>
              <div class="wcc-import-settings-row">
                <div class="wcc-import-settings-title-wrap">
                  <label
                    for="wcc-import-settings"
                    class="wcc-import-settings-title wcc-title-label"
                    id="wcc-import-settings-title"
                  >
                    {{ $i18n.__("Import", "webtoffee-cookie-consent") }}
                  </label>
                </div>
                <div class="wcc-import">
                  <div class="wcc-upload-section">
                    <label
                      :class="[
                        'wcc-button',
                        'wcc-button-light-blue-outline-dashed',
                        { 'wcc-file-selected': settingsFileName },
                      ]"
                      :data-test-id="`wcc-import-settings-upload-button`"
                    >
                      {{
                        settingsFileName ||
                        $i18n.__("Upload file", "webtoffee-cookie-consent")
                      }}
                      <input
                        type="file"
                        accept=".json"
                        class="wcc-upload-input"
                        @change="handleFileSelect('settings', $event)"
                        style="display: none"
                        :data-test-id="`wcc-import-settings-input-file`"
                      />
                    </label>
                    <p
                      class="wcc-import-settings-note wcc-import-export-settings-help"
                    >
                      {{
                        $i18n.__(
                          "Upload a JSON file to update your settings.",
                          "webtoffee-cookie-consent"
                        )
                      }}
                    </p>
                  </div>
                  <div class="wcc-import-button-wrap" v-if="settingsFileName">
                    <base-button
                      class="wcc-button wcc-button-outline-blue wcc-import-settings-btn"
                      @click.native="importFile('settings')"
                      ref="wccButtonImportSettings"
                      :data-test-id="`wcc-import-settings-button`"
                      >
                      {{
                        $i18n.__("Import Settings", "webtoffee-cookie-consent")
                      }}
                    </base-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <modal
      ref="confirmationModal"
      :class="['wcc-app-modal-' + modalType, 'wcc-advanced-tab-confirm-modal']"
    >
      <template v-slot:header>
        <h4>{{ modalHeader }}</h4>
      </template>
      <template v-slot:body>
        <div class="wcc-row">
          <div class="wcc-col-12">
            {{ modalBody }}
          </div>
        </div>
      </template>
      <template v-slot:footer>
        <div
          class="wcc-app-modal-actions wcc-app-reset-settings wcc-justify-end"
        >
          <button class="wcc-button wcc-button-no-style" @click="closeModal" :data-test-id="`wcc-advanced-cancel-button`">
            {{ $i18n.__("Cancel", "webtoffee-cookie-consent") }}
          </button>
          <base-button class="wcc-button-primary" @click.native="confirmAction" ref="wccActionButton" :data-test-id="`wcc-advanced-confirm-button`" >
            {{ modalConfirmButton }}
          </base-button>
        </div>
      </template>
    </modal>
  </div>
</template>

<script>
import Loader from "@/components/elements/Loader.vue";
import wccRest from "@/helpers/api";
import { mapState } from "vuex";
import Modal from "@/components/Modal.vue";
import RenewNotice from "@/components/ConsentRenewNotice.vue";

export default {
  name: "Advanced",
  components: {
    Loader,
    Modal,
    RenewNotice,
  },
  data() {
    return {
      renewedDate: null,
      renewing: false,
      resetting: false,
      modalType: "",
      modalHeader: "",
      modalBody: "",
      modalConfirmButton: "",
      selectedFile: null,
      fileName: "",
      selectedSettingsFile: null,
      settingsFileName: "",
    };
  },
  methods: {
    async renew() {
      this.$refs.wccActionButton.startLoading();
      try {
        this.renewing = true;
        let data = {};
        this.renewedDate = new Date().getTime();
        data.date = this.renewedDate;
        this.setOption("renew_date", data);
        // Hide renew consent warning
        let renewData = {};
        renewData.status = false;
        this.setOption("renew_consent_notice", renewData);
        this.saveOptions();
        this.updateConsentStatus(false);
        this.showSuccessMessage(
          this.$i18n.__(
            "User consent renewed successfully!",
            "webtoffee-cookie-consent"
          )
        );
        // This will hide renew consent warning.
        await wccRest.post({
          path: `/settings/renewconsentnotice`,
          data: { status: false },
        });
      } catch (error) {
        console.error(error);
        this.showErrorMessage(
          this.$i18n.__(
            "Failed to renew user consents.",
            "webtoffee-cookie-consent"
          )
        );
      } finally {
        this.renewing = false;
        this.closeModal();
      }
      this.$refs.wccActionButton.startLoading();
    },
    async reset() {
      this.$refs.wccActionButton.startLoading();
      try {
        this.resetting = true;
        const bannerReset = await wccRest.post({
          path: "banners/reset",
        });
        const settingsReset = await wccRest.post({
          path: "settings/reset",
        });
        if (bannerReset !== null || settingsReset !== null) {
          this.showSuccessMessage(
            this.$i18n.__(
              "Plugin settings reset successfully!",
              "webtoffee-cookie-consent"
            )
          );
          this.$refs.confirmationModal.close();
        }
      } catch (error) {
        console.error(error);
        this.showErrorMessage(
          this.$i18n.__(
            "Failed to reset plugin settings.",
            "webtoffee-cookie-consent"
          )
        );
      } finally {
        this.resetting = false;
        this.closeModal();
        window.location.reload();
      }
      this.$refs.wccActionButton.stopLoading();

    },
    async exportCookies() {
      this.$refs.wccButtonExportCookieList.startLoading();
      try {
        const response = await wccRest.post({
          path: "cookies/export",
        });
        if (response.csv_url) {
          const link = document.createElement("a");
          link.href = response.csv_url;
          link.setAttribute("download", response.file_name);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          console.error("Export failed:", response.error || "Unknown error");
          this.showErrorMessage(
            response.error 
              ? response.error // Don't translate dynamic error messages
              : this.$i18n.__("Failed to export cookies.", "webtoffee-cookie-consent")
          );
        }
      } catch (error) {
        console.error(error);
        this.showErrorMessage(
          this.$i18n.__(
            "An error occurred while exporting cookies.",
            "webtoffee-cookie-consent"
          )
        );
      }
      this.$refs.wccButtonExportCookieList.stopLoading();
    },
    async exportSettings() {
      this.$refs.wccButtonExportSettings.startLoading();
      try {
        const response = await wccRest.post({
          path: "settings/export",
        });
        const link = document.createElement("a");
        link.href = response.json_url;
        link.setAttribute("download", response.file_name);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error("Error during export:", error);
        this.showErrorMessage(
          this.$i18n.__(
            "An error occurred while exporting settings.",
            "webtoffee-cookie-consent"
          )
        );
      } finally {
        this.$refs.wccButtonExportSettings.stopLoading();
      }
    },
    handleFileSelect(type, event) {
      const file = event.target.files[0];
      if (!file) return;

      // Get file extension
      const fileExtension = file.name.split('.').pop().toLowerCase();

      // Validate file type based on import type
      if (type === "settings") {
          if (fileExtension !== "json") {
              this.showErrorMessage(
                  this.$i18n.__(
                      "Please select a valid JSON file for settings import.",
                      "webtoffee-cookie-consent"
                  )
              );
              return;
          }
          this.selectedSettingsFile = file;
          this.settingsFileName = file.name;
      } else if (type === "cookies") {
          if (fileExtension !== "csv") {
              this.showErrorMessage(
                  this.$i18n.__(
                      "Please select a valid CSV file for cookies import.",
                      "webtoffee-cookie-consent"
                  )
              );
              return;
          }
          this.selectedFile = file;
          this.fileName = file.name;
      }
    },

    async importFile(type) {
      const isCookiesImport = type === "cookies";
      const file = isCookiesImport ? this.selectedFile : this.selectedSettingsFile;
      const refButton = isCookiesImport
          ? this.$refs.wccButtonImportCookieList
          : this.$refs.wccButtonImportSettings;

      if (!file) {
          this.showErrorMessage(
              this.$i18n.__(
                  `No file selected for ${isCookiesImport ? "cookie" : "settings"} import.`,
                  "webtoffee-cookie-consent"
              )
          );
          return;
      }

      refButton.startLoading();

      try {
          // Create FormData
          const formData = new FormData();
          formData.append('file', file);
          
          // Add the filename as a separate field
          formData.append('filename', file.name);

          const response = await wccRest.post({
              path: `${isCookiesImport ? "cookies/import" : "settings/import"}`,
              data: formData,
              // Required for proper file upload via FormData
              processData: false, // Don't process the FormData object
              contentType: false  // Don't set Content-Type header, let browser handle it for FormData
          });
          if (response.success) {
              this.showSuccessMessage(
                  this.$i18n.__(
                      `${isCookiesImport ? "Cookies" : "Settings"} imported successfully.`,
                      "webtoffee-cookie-consent"
                  )
              );
          } else {
              this.showErrorMessage(
                  this.$i18n.__(
                      response.message || `Failed to import ${isCookiesImport ? "cookies" : "settings"}.`,
                      "webtoffee-cookie-consent"
                  )
              );
          }
      } catch (error) {
          console.error('Import error:', error);
          this.showErrorMessage(
              this.$i18n.__(
                  `An error occurred while importing ${isCookiesImport ? "cookies" : "settings"}.`,
                  "webtoffee-cookie-consent"
              )
          );
      } finally {
          if (isCookiesImport) {
              this.selectedFile = null;
              this.fileName = "";
          } else {
              this.selectedSettingsFile = null;
              this.settingsFileName = "";
          }
          refButton.stopLoading();
          setTimeout(() => {
              window.location.reload();
          }, 2000);
          return;
      }
    },
    showModal(type) {
      this.modalType = type;
      if (type === "renew") {
        this.modalHeader = this.$i18n.__(
          "Renew user consents?",
          "webtoffee-cookie-consent"
        );
        this.modalBody = this.$i18n.__(
          "The cookie banner will reappear for all previously consenting users, prompting them to provide their consent once more",
          "webtoffee-cookie-consent"
        );
        this.modalConfirmButton = this.$i18n.__(
          "Renew now",
          "webtoffee-cookie-consent"
        );
        this.confirmAction = this.renew;
      } else if (type === "reset") {
        this.modalHeader = this.$i18n.__(
          "Reset to plugin default settings?",
          "webtoffee-cookie-consent"
        );
        this.modalBody = this.$i18n.__(
          "You will lose all the customizations you have done so far",
          "webtoffee-cookie-consent"
        );
        this.modalConfirmButton = this.$i18n.__(
          "Reset",
          "webtoffee-cookie-consent"
        );
        this.confirmAction = this.reset;
      }
      this.$refs.confirmationModal.show();
    },
    closeModal() {
      this.$refs.confirmationModal.close();
    },
    formatTimestampToDate(timestamp) {
      if (!timestamp) {
        return "";
      }
      timestamp = parseInt(timestamp, 10);
      const parsedDate = new Date(timestamp);
      return parsedDate.toLocaleDateString("en-US", {
        month: "long",
        day: "numeric",
        year: "numeric",
      });
    },
    showSuccessMessage(message) {
      this.$root.$emit("triggerNotification", {
        type: "success",
        message: message,
      });
    },
    showErrorMessage(message) {
      this.$root.$emit("triggerNotification", {
        type: "error",
        message: message,
      });
    },
  },
  computed: {
    ...mapState("settings", ["info"]),
    loading() {
      return this.info === false;
    },
    renewedDateFormatted() {
      if (!this.renewedDate) {
        return "";
      }
      return this.formatTimestampToDate(this.renewedDate);
    },
    mccEnabled: {
      get() {
          return this.$store.state.settings.options.microsoft_clarity.status;
      },
      set(value) {
        this.$store.state.settings.options.microsoft_clarity.status = value;
        let data = {};
        data.status = value;
        this.setOption("microsoft_clarity", data);
        this.saveOptions();
      },
    },
  },
  watch: {
    "info.renew_date.date": {
      handler(newValue) {
        if (newValue) {
          this.renewedDate = newValue;
        }
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.info && this.info.renew_date && this.info.renew_date.date) {
      this.renewedDate = this.info.renew_date.date;
    }
  },
};
</script>
  <style lang="scss">
@include wrap-class() {
  .wcc-advanced-section-content {
    border: 1px solid #eaebed;
    border-radius: 12px;
    margin: 8px 15px 0px 15px;
    &.wcc-nav-tab-content-container {
      padding: 0px 20px 15px 33px;
      border-bottom-right-radius: 16px;
    }
    max-width: 1097px;
    width: auto;
  }
  .wcc-section-header-title {
    color: #2a3646;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
  }
  .wcc-advanced-details-wrap > div {
    margin-bottom: 20px;
  }
  .wcc-renew-consent-row,
  .wcc-reset-settings-row,
  .wcc-export-cookie-row,
  .wcc-import-cookie-row,
  .wcc-export-settings-row,
  .wcc-import-settings-row, 
  .wcc-mcc-settings-row  {
    display: flex;
    align-items: baseline;
  }
  .wcc-renew-consent-title-wrap,
  .wcc-reset-settings-title-wrap,
  .wcc-export-cookie-title-wrap,
  .wcc-import-cookie-title-wrap,
  .wcc-export-settings-title-wrap,
  .wcc-import-settings-title-wrap,
  .wcc-mcc-settings-title-wrap {
    width: 200px;
  }
  .wcc-title-label {
    color: #2a3646;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    min-width: 120px;
    margin-bottom: 0px;
  }
  .wcc-renew-consent-btn-wrap .wcc-button-red,
  .wcc-renew-consent-btn-wrap .wcc-button-red:hover,
  .wcc-reset-settings-btn-wrap .wcc-button-red,
  .wcc-reset-settings-btn-wrap .wcc-button-red:hover,
  .wcc-reset-settings-btn-wrap .wcc-button-red:focus {
    background-color: #ffeded;
    color: #d63638;
    border-radius: 4px;
    border-style: none;
    width: auto;
    min-width: 80px;
    padding: 8px 14px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    line-height: 16px;
  }
  .wcc-renew-consent-date-row {
    margin-left: 200px;
    margin-top: 8px;
  }
  .wcc-renew-consent-date-row > label {
    color: #6e7681;
  }
  .wcc-advanced-tab-confirm-modal {
    .wcc-app-modal {
      width: 590px;
      height: auto;
      border-radius: 10px;
      background: #fafdff;
      .wcc-app-modal-footer .wcc-app-modal-actions {
        button {
          margin-left: 20px;
        }
        .wcc-button-no-style {
          color: #056be7;
        }
        .wcc-button-no-style:hover {
          color: #2d4f97;
        }
        .wcc-button-primary {
          background: #3157a6;
        }
        .wcc-button-primary:hover {
          background: #2d4f97;
          border-color: #2d4f97;
        }
      }
    }
    .wcc-app-modal-header,
    .wcc-app-modal-body {
      padding: 14px 30px;
    }
  }
  .wcc-export-import-cookie-wrap,
  .wcc-import-export-settings-wrap {
    border-top: #eaebed 1px solid;
  }
  .wcc-export-import-cookie-subtitle {
    font-size: 14px;
    font-weight: 700;
    line-height: 16.71px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6e7681;
  }
  .wcc-export-import-cookie-wrap > div,
  .wcc-import-export-settings-wrap > div {
    padding: 8px 0px;
  }
  .wcc-export-import-cookie-header {
    padding-top: 8px;
  }
  .wcc-button-light-blue-outline-dashed {
    width: 280px;
    text-align: center;
    height: 50px;
    font-size: 14px;
    align-content: center;
  }
  .wcc-button-light-blue-outline-dashed.wcc-file-selected {
    color: #1b305b;
    font-size: 13px;
    font-weight: 400;
  }
  .wcc-import-export-cookie-help {
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: 14.52px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6e7681;
  }
  .wcc-export-cookie-note {
    margin-top: 8px;
  }
  .wcc-export-cookie-btn-wrap .wcc-export-cookie-btn::before,
  .wcc-export-settings-btn-wrap .wcc-export-settings-btn::before {
    content: "";
    vertical-align: middle;
    height: 20px;
    padding: 3px 12px 3px 8px;
    background-image: url("~@/assets/upload-icon.svg");
    display: inline-block;
    background-repeat: no-repeat;
  }
  .wcc-import-button-wrap .wcc-import-cookie-btn,
  .wcc-import-button-wrap .wcc-import-settings-btn {
    margin-bottom: 0px;
    &::before {
      content: "";
      vertical-align: middle;
      height: 20px;
      padding: 3px 12px 3px 8px;
      background-image: url("~@/assets/download-icon.svg");
      display: inline-block;
      background-repeat: no-repeat;
    }
  }
  .wcc-import-button-wrap {
    margin-top: 8px;
  }
}
</style>