<template>
    <div
      class="menu-bar__content menu-bar-content home-list p-3"
      :class="{ 'hidden-heder': !showMainpag }"
    >
      <Breadcrumbs class="m-0" />
  
      <div
        class="home-list__content scroll-needed"
        :class="{ loading: fetchingData }"
      >
        <div class="last-search h-100" id="last-search">
          <div class="last-search-content h-100">
            <div class="content">
              <div class="col-12" v-for="project in projects" :key="project.id">
                <a
                  @click.prevent="redirectTo(project)"
                  :href="project.link"
                  class="project-card"
                  :class="{ active: project.id === projectGetter?.id }"
                  :title="project.title"
                >
                <div class="row no-gutters card-hover flex-grow-1">
                  <div class="col-md-2 d-flex justify-content-center align-items-center"
                  >
                  <img
                  :src="projectIcon(project.link)"
                  class="img-fluid"
                  :alt="project.title"
                  />
                </div>
             
  
                    <div class="col-md-10 d-flex align-items-center">
                      <div class="card-body text-dark">
                        <h5 class="card-title">
                          {{ project.title }}
                        </h5>
                        <p class="card-text">
                          {{ project.comment }}
                        </p>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // import { dragDropMoveMixin } from "~/borhan/mixins/dragDropMoveMixin";
  // import { searchMixin } from "~/borhan/mixins/searchMixin";
  import ImageUploader from "vue-image-upload-resize";
  import chatApi from "~/apis/chatApi";
  import { mapActions, mapState } from "pinia";
  
  import privatesContextMenu from "~/json/chat/json/privatesContextMenu.json";
  import groupsContextMenu from "~/json/chat/json/groupsContextMenu.json";
  import lobbiesContextMenu from "~/json/chat/json/lobbiesContextMenu.json";
  import menu from "~/json/chat/json/menu.json";
  import { useCommonStore } from "~/stores/commonStore";
  
// import { useAuthStore } from "~/stores/authStore";
  export default {
    // mixins: [dragDropMoveMixin],
    emits: ["list-changed", "list-item-changed"],
    props: {
        statusPagHedear: {
      default: 1,
      type: Number,
    },
    },
    watch: {
      $route: {
        handler: function(to) {
          this.isRedirectedFromOtherSystems = false;
          this.getAll(to.name);
        },
        deep: true,
        // immediate: true,
      },
    },
    beforeMount() {
      const headers = {
        "app-id": import.meta.env.VITE_APP_ID,
        lang: import.meta.env.VITE_LANG,
        "app-version-code": import.meta.env.VITE_APP_VERSION,
      };
  
      this.httpService = new HttpService(
        import.meta.env.VITE_MESSAGE_BASE_URL,
        headers
      );
      this.authHttpService = new HttpService(import.meta.env.VITE_AUTH_BASE_URL);
  
      if (this.$route.name == "privates")
        this.commonContextMenu = privatesContextMenu;
  
      if (this.$route.name == "groups")
        this.commonContextMenu = groupsContextMenu;
  
      if (this.$route.name == "lobbies")
        this.commonContextMenu = lobbiesContextMenu;
      if (this.$route.name == "unReads")
        this.commonContextMenu = groupsContextMenu;
  
      this.SET_LIST(undefined);
    },
    mounted() {
      // check if redirected from other systems.
      // or clicked on a copy link.
      // if (this.$route.query["group-id"]) {
      //   this.groupId = this.$route.query["group-id"];
      //   this.isRedirectedFromOtherSystems = true;
      // }
      // this.getAll(this.$route.name);
      // if(this.statusPagHedear==1){
      // }
    },
  
    data() {
      return {
        // #region mehdi
  
        showMainpag: true,
        menu: menu,
  
        // #endregion
  
        typingTimer: 0,
        doneTypingInterval: 500,
        searchText: "",
  
        serachType: "all",
        showAddUserForm: false,
        busy: false,
        foundGroups: [],
        showUploadAvatarForm: false,
        showGroupSearchForm: false,
  
        groupsExpanded: false,
        showNewGroupForm: false,
        hasImage: false,
        imageUrl: undefined,
        uploading: false,
  
        selectedUser: {},
        foundUsers: [],
        isLoading: false,
        showUserSearchForm: false,
  
        selectedGroup: undefined,
        commonContextMenu: [],
  
        fetchingData: false,
        users: [],
        prevSelectedItemIndex: 0,
        prevParentSelectedItemIndex: 0,
  
        convertGroupIntegerToString: {
          groups: 1,
          lobbies: 2,
          privates: 3,
        },
        convertGroupStringToInteger: {
          1: "groups",
          2: "lobbies",
          3: "privates",
        },
        showForm: false,
        formType: 1,
        form: {
          id: undefined,
          title: null,
          desc: null,
          type: 1,
          message_state: 1,
          members: [],
          parent_id: undefined,
        },
        collapseAll: false,
        groups: [],
        showReplaceInput: true,
        httpService: undefined,
        authHttpService: undefined,
        list: [],
  
        pagination: {
          pages: 0,
          total: 0,
          page: 1,
          offset: 0, // page * per_page
          limit: 50, //per_page
        },
        isRedirectedFromOtherSystems: false,
        groupId: undefined,
        messageId: undefined,
      };
    },
  
    computed: {
      ...mapState(useCommonStore,["isSidebarCollapsed"]),
    },
    methods: {
      ...mapActions(useCommonStore, ["TOGGLE_PANEL", "checkPermissions"]),
      ...mapActions("list", ["SET_LIST"]),
      sendQuery() {
        // todo: show loading.
        // todo: send query and show result.
        // todo: hide loading.
  
        clearTimeout(this.typingTimer);
        this.typingTimer = setTimeout(() => {
          this.getAll();
        }, this.doneTypingInterval);
      },
      onKeyDown() {
        clearTimeout(this.typingTimer);
      },
      setSearchType(type) {
        this.serachType = type;
      },
      clearSearchAndGetList() {
        this.searchText = null;
        this.getAll();
      },
  
      async getAll(listType = "all") {
        if (this.fetchingData) return;
        this.fetchingData = true;
  
        let url = chatApi[listType].list;
  
        // let urlPrefix = chatApi.groups.list;
        if (!(listType == "lobbies" || listType == "unReads"))
          url += `${this.pagination.offset}/${this.pagination.limit}`;
        // else if (listType == "lobbies") urlPrefix = chatApi.lobbies.list
        // else if (listType == "privates") url += `${this.pagination.offset}/${this.pagination.limit}`;
        // let url = urlPrefix + `${this.pagination.offset}/${this.pagination.limit}`
        // const methodType = listType == "unReads" ? 'postRequest' : 'getRequest'
  
        return await this.httpService
          .getRequest(url)
          .then((response) => {
            this.groups = response.data;
            this.users = response.users;
            this.pagination = { ...this.pagination, ...response.pagination };
  
            // when redirecting from other pages(jahat).
            if (this.isRedirectedFromOtherSystems) {
              this.groups.forEach((group) => {
                if (group.id == this.groupId) {
                  group.active = true;
                  this.SET_LIST(group);
                }
              });
            }
            return response;
          })
          .catch((error) => {
          })
          .finally(() => {
            this.fetchingData = false;
            this.busy = false;
  
            this.showMainpag = true;
          });
      },
      setUser(list, responseUsers) {
        list.forEach((listItem) => {
          listItem.user = responseUsers.find(
            (user) => user.user_id == listItem.user
          );
        });
      },
  
      createItem(group_id = undefined) {
        if (this.fetchingData) return;
        this.fetchingData = true;
  
        let url = chatApi[this.$route.name].create;
  
        // if (formType == "groups") urlPrefix =
        // else if (formType == "lobbies") urlPrefix = chatApi.lobbies.create
        // else if (formType == "privates") urlPrefix = chatApi.privates.create
        // const payload  = structuredClone(this.form);
  
        this.form.members = JSON.stringify(this.form.members);
        this.form.admins = undefined;
        this.form.group_id = group_id;
  
        this.httpService
          .formDataRequest(url, this.form)
          .then((res) => {
            this.fetchingData = false;
  
            // this.getAll(this.formType);
            // this.form = res.data;
            // this.mySwalToast({
            //   title: "",
            //   html: res.message,
            // });
  
            this.showNewGroupForm = false;
            this.showUploadAvatarForm = true;
          })
          
          
      },
      // remove group/remove lobby group
      removeItem(groups, groupItem, index) {
        this.mySwalConfirm({
          title: "هشدار!!!",
          html: `از حذف <b>${groupItem.title}</b> اطمینان دارید؟ `,
          icon: "warning",
        }).then((result) => {
          if (result.isConfirmed) {
            const payload = {
              group_id: groupItem.id,
            };
  
            this.httpService
              .postRequest(chatApi.groups.delete, payload)
              .then((res) => {
                // this.mySwalToast({
                //   html: res.message,
                //   icon: "success",
                // });
                this.getAll();
  
                // groups.splice(index, 1);
              });
          }
        });
      },
  
      editItem(groups, groupItem, index) {
        this.form = structuredClone(groupItem);
        this.markActive(groups, index);
        this.openGroupCreateForm(this.convertGroupIntegerToString[this.formType]);
      },
      resetForm() {
        this.form = {
          id: undefined,
          title: null,
          desc: null,
          type: 1,
          message_state: 1,
          members: [],
        };
      },
  
      loadMore($event) {
        // const listElm = document.querySelector("#last-search");
        const listElm = $event.target;
  
        const vm = this;
        if (vm.busy) return;
  
        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
          this.busy = true;
          vm.pagination.offset = vm.pagination.offset + vm.pagination.limit;
  
          if (vm.pagination.total > vm.pagination.offset) {
            setTimeout(() => {
              vm.getListOnScroll();
            }, 300);
          } else {
            vm.mySwalToast({
              title: "کاربر محترم",
  
              html: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
              icon: "info",
              position: "bottom-start",
            });
            vm.busy = false;
          }
        } else vm.busy = false;
      },
      getListOnScroll() {
        const listType = this.$route.name;
        let url = chatApi[listType].list;
  
        // let urlPrefix = chatApi.groups.list;
        if (!(listType == "lobbies" || listType == "unReads"))
          url += `${this.pagination.offset}/${this.pagination.limit}`;
        // else if (listType == "lobbies") urlPrefix = chatApi.lobbies.list
        // else if (listType == "privates") url += `${this.pagination.offset}/${this.pagination.limit}`;
        // let url = urlPrefix + `${this.pagination.offset}/${this.pagination.limit}`
  
        // const methodType = listType == "unReads" ? 'postRequest' : 'getRequest'
  
        this.httpService
          .getRequest(url)
          .then((response) => {
            this.pagination = { ...this.pagination, ...response.pagination };
            this.groups = [...this.groups, ...response.data];
          })
          .finally(() => {
            this.busy = false;
          });
      },
  
      openUserSearchForm() {
        this.showForm = true;
        this.showUserSearchForm = true;
        this.formType = "privates";
        // this.loading = false;
        // this.groupCreated = false;
      },
      openGroupSearchForm(formType, groupItem = undefined) {
        this.showForm = true;
        this.showGroupSearchForm = true;
        this.formType = formType;
        this.selectedGroup = groupItem;
      },
  
      openGroupCreateForm() {
        this.showForm = true;
        this.showNewGroupForm = true;
        this.formType = "groups";
      },
  
      openCreateForm(formType, groupItem = undefined) {
        // if (formType == 'privates')
        //   this.showUserSearchForm = true;
        // else if (formType == 'groups')
        this.showNewGroupForm = true;
  
        this.selectedGroup = groupItem;
        this.showForm = true;
        this.formType = "groups";
        this.loading = false;
      },
  
      closeCreateForm() {
        this.showForm = false;
        this.showNewGroupForm = false;
        this.showGroupSearchForm = false;
        this.showUserSearchForm = false;
        this.showUploadAvatarForm = false;
        this.loading = false;
        this.resetForm();
  
        this.$router
          .push({
            name: this.formType,
          })
          .catch(() => {});
      },
  
      closeCreateFormWithoutRedirect() {
        this.showForm = false;
        this.showNewGroupForm = false;
        this.showGroupSearchForm = false;
        this.showUserSearchForm = false;
        this.showUploadAvatarForm = false;
        this.loading = false;
      },
  
      resetPagination() {
        this.pagination = {
          pages: 0,
          total: 0,
          page: 1,
          offset: 0, // page * per_page
          limit: 50, //per_page
        };
      },
      toggleSidebarMenu() {
        this.$store.commit("TOGGLE_SIDEBAR_MENU");
      },
      markActive(groups, index) {
        if (this.prevSelectedItemIndex != index) {
          this.$set(groups[this.prevSelectedItemIndex], "active", false);
        }
  
        this.prevSelectedItemIndex = index;
        this.$set(groups[index], "active", true);
      },
  
      showMessages(groups, groupItem, index) {
        this.markActive(groups, index);
        this.SET_LIST(groupItem);
  
        history.pushState({}, document.title, this.$route.path);
        this.isRedirectedFromOtherSystems = false;
        this.$route.query["group-id"] = undefined;
        this.$route.query["message-id"] = undefined;
  
        this.$emit("update-messages");
      },
      // lobby,lobbyIndex.sub_groups_item, childIndex
      lobbyShowMessages(lobby, parentIndex, groupItem, index) {
        // اگر تالارثابت باشه و کاربر بر روی گروه های تالار کلیک کند.
        if (
          this.prevParentSelectedItemIndex == parentIndex &&
          this.prevSelectedItemIndex != index
        ) {
          this.$set(
            lobby[this.prevParentSelectedItemIndex].sub_groups[
              this.prevSelectedItemIndex
            ],
            "active",
            false
          );
        }
        // کاربر بر روی تالار دیگری کلیک کرده است.
        else if (this.prevParentSelectedItemIndex != parentIndex) {
          this.$set(
            lobby[this.prevParentSelectedItemIndex].sub_groups[
              this.prevSelectedItemIndex
            ],
            "active",
            false
          );
        }
  
        this.prevSelectedItemIndex = index;
        this.prevParentSelectedItemIndex = parentIndex;
  
        this.$set(lobby[parentIndex].sub_groups[index], "active", true);
  
        this.SET_LIST(groupItem);
        this.$emit("update-messages");
      },
      // after finding the user, on select user event, show the user's messages
      showUserPrivateMessages(user) {
        user.user = user.user_id;
        // user.id = user.user_id;
        user.title = userFullname(user);
        user.desc = null;
  
        this.SET_LIST(user);
        this.groups.forEach((groupItem) => {
          groupItem.active = false;
  
          if (groupItem.user == user.id) groupItem.active = true;
        });
  
        this.closeCreateFormWithoutRedirect();
        this.$emit("update-messages");
      },
      asyncFindGroup(query) {
        if (this.isLoading) return;
        this.isLoading = true;
  
        if (query.trim().length) {
          this.httpService
            .getRequest("group/ve/search/1/" + query)
            .then((response) => {
              this.foundGroups = response.data ?? [];
            })
            .catch((err) => {
            })
            .finally(() => {
              this.isLoading = false;
            });
        }
      },
      // add group to a group(making a lobby)
      addGroupToSelectedGroup(comboSelectedGroup) {
        if (this.fetchingData) return;
        this.fetchingData = true;
  
        let url = chatApi[this.$route.name].parent;
  
        const payload = {
          parent_id: comboSelectedGroup.id,
          group_id: this.selectedGroup.id,
        };
  
        this.httpService
          .formDataRequest(url, payload)
          .then((res) => {
            // this.mySwalToast({
            //   title: "",
            //   html: res.message,
            // });
            this.closeCreateForm();
          })
          
          .finally(() => {
            this.fetchingData = false;
          });
      },
      // remove from lobby
      removeGroupFromLobby(group) {
        this.mySwalConfirm({
          title: "هشدار!!!",
          html: ` حذف <b>${group.title}</b> ?`,
          icon: "warning",
        }).then((result) => {
          if (result.isConfirmed) {
            if (this.fetchingData) return;
            this.fetchingData = true;
  
            let url = chatApi[this.$route.name].delete;
  
            const payload = {
              group_id: group.id,
              parent_id: 0,
            };
  
            this.httpService
              .formDataRequest(url, payload)
              .then((res) => {
                this.fetchingData = false;
  
                // this.mySwalToast({
                //   html: res.message,
                // });
  
                this.getAll("lobbies");
              })
              
          }
        });
      },
  
      replayCount(replays) {
        let sum = 0;
        replays.forEach((item) => {
          sum += item.count;
        });
        return sum;
      },
      limitText(count) {
        return `و ${count} کاربر دیگر`;
      },
      asyncFind(query) {
        if (this.isLoading) return;
        this.isLoading = true;
  
        if (query.trim().length) {
          this.authHttpService
            .postRequest("user/suggestion", { query })
            .then((response) => {
              this.isLoading = false;
              this.foundUsers = response.data ?? [];
            })
            .catch((err) => {
            })
            
        }
      },
  
      isGroupAdmin(comment) {
        const isAdmin =
          comment.admins.findIndex((user) => user == this.currentUser.user_id) >
          -1;
        return isAdmin;
      },
      getFileExtension(filename) {
        const validtypes = [
          "xlsx",
          "xls",
          "doc",
          "docx",
          "ppt",
          "pptx",
          "txt",
          "pdf",
          "jpg",
          "png",
          "jpeg",
        ];
        const fileExtension = filename?.split(".").pop();
        return validtypes.includes(fileExtension) ? fileExtension : "other";
      },
      setImage(file) {
        this.hasImage = true;
        this.imageUrl = file;
        this.form.avatar = file.name;
        this.saveFile(file);
      },
      saveFile() {
        if (this.uploading) return;
        this.uploading = true;
  
        let url = chatApi.groups.updateAvatar + this.form.id;
        const formData = new FormData();
        formData.append("file", this.$refs["file-uploader"].currentFile);
  
        this.httpService
          .postRequest(url, formData, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => {
            // this.mySwalToast({
            //   title: res.message,
            //   html: "",
            // });
  
            this.closeCreateForm();
            // this.getAll();
          })
          .catch((err) => {
          })
          .finally(() => {
            this.uploading = false;
          });
      },
      addUserToGroup(selectedUser) {
        if (this.fetchingData) return;
        this.fetchingData = true;
  
        let url = chatApi.groups.addMember;
        const payload = {
          group_id: this.form.id,
          members: [selectedUser.id],
        };
  
        this.httpService
          .postRequest(url, payload)
          .then((res) => {
            // this.mySwalToast({
            //   title: "",
            //   html: res.message,
            // });
            // this.closeCreateForm();
            // this.getAll();
          })
          .catch((err) => {
          })
          .finally(() => {
            this.isLoading = false;
            this.fetchingData = false;
          });
      },
  
      // #region mehdi
      showfilter() {
        this.showMainpag = !this.showMainpag;
      },
      showSearchs() {
        this.showSearch = false;
        this.$refs.search.classList.toggle("hidean-search");
      },
      // #endregion
    },

  };
  </script>
  
  <style scoped lang="scss">
  @import "../../../../assets/common/scss/mixin.scss";
  
  .group-item {
    .group-row {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 100%;
      margin-bottom: 0.3em;
  
      &.enable-hover:hover {
        .group-picture-container {
          .context-menu-dropdown {
            display: flex;
          }
          .group-picture {
            display: none;
          }
        }
        .group-content {
          background-color: #f0f0f0;
        }
      }
  
      .group-picture-container {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
  
        // margin-left: 0.5em;
  
        border: 1px solid #ccc;
        width: 2.3em;
        height: 2.3em;
        position: relative;
        background-color: #fff;
  
        .context-menu-dropdown {
          display: none;
        }
        .group-picture {
          object-fit: cover;
          object-position: center;
          overflow: hidden;
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
  
      .group-content {
        flex: 1;
        border-radius: 0;
        position: relative;
        padding: 0.3em;
  
        &:active,
        &.active {
          background-color: #d8f8fd;
        }
  
        .group-title-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
  
          .group-title {
            // display: flex;
            flex: 1;
            text-align: right;
            // align-items: center;
            // font-size: 0.7rem;
            font-size: 0.8rem;
            margin-bottom: 0.3em;
            // font-family: "sahel-bold";
            font-family: "sahel-semi-bold";
            color: #444;
            @include textOverflow(13em);
  
            .tavasi {
              font-size: 0.8rem;
              margin-left: 0.3em;
            }
          }
          .group-time {
            font-size: 0.7rem;
            font-family: "sahel-light";
          }
  
          .unreads-box {
            display: flex;
            align-items: center;
  
            .btn {
              padding: 0;
              margin: 0;
              margin-right: 0.5em;
              color: #888;
  
              svg {
                font-size: 0.7rem;
              }
            }
          }
        }
  
        .group-description-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
  
          .group-unread-indicator {
            font-size: 0.7rem;
            background-color: #00b6e3;
            font-family: "sahel-light";
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 0.4em;
          }
          .group-description {
            color: #6f6f6f;
            font-size: 0.8em;
            margin: 0;
            flex: 1;
            text-align: right;
            @include textOverflow(15em);
          }
        }
  
        .unread-button {
          .unread-message-label {
            font-size: 0.7rem;
            color: #6f6f6f;
            margin-left: 0.3em;
            line-height: 1;
          }
  
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 0.2em;
          font-size: 0.9rem;
          line-height: 1.2;
        }
      }
    }
  }
  
  #lobby-accordion {
    & > .card {
      overflow: visible;
    }
  
    .list-group-item {
      border-radius: 0;
  
      &:not(:last-child) {
        border-bottom: 1px dashed #ddd;
      }
  
      // &:last-child {
      //   .group-content {
      //     &::before{
      //       content:none;
      //     }
      //   }
      // }
    }
    .card-header {
      .group-row:hover {
        .group-content {
          background-color: transparent;
        }
      }
    }
    .card-body {
      .group-row {
        &:hover {
        }
  
        &:active,
        &.active {
        }
  
        .group-picture-container {
          .group-picture {
            // width: 3em;
            // height: 3em;
          }
        }
  
        .group-content {
          .group-title-container {
            .group-title {
              font-size: 0.8rem;
              .tavasi {
                font-size: 0.7rem;
                // margin-left: 0.3em;
              }
            }
            .group-time {
              font-size: 0.7rem;
            }
          }
  
          .group-description-container {
            .group-unread-indicator {
              font-size: 0.7rem;
            }
            .group-description {
              font-size: 0.7rem;
            }
          }
        }
      }
    }
  }
  
  .menu-bar__content {
    position: static;
    flex: 1 1 100%;
    max-width: 25em;
    max-width: 20em;
    width: auto;
    min-width: 20em;
  
    &.show-list-panel {
      right: 0 !important;
    }
  }
  
  .home-list__content {
    /*max-height: calc(100vh - 12em);*/
    height: calc(100vh - 8.5em);
    position: relative;
    overflow-x: hidden;
    padding-left: 0.3em;
  
    &.loading {
      //background-image: url('./img/item-loading.svg');
      background-repeat: repeat-y;
      background-position: top right;
      background-size: 12em;
  
      &::before {
        content: "";
        clear: both;
  
        position: absolute;
        right: 0;
        width: 0.5em;
  
        height: 100%;
        background-color: #fff;
  
        animation-name: example;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }
    }
  
    &:hover .actions-button {
      opacity: 1;
      visibility: visible;
      transition: all 0.2s;
    }
  }
  
  .actions-button {
    position: absolute;
    bottom: 1em;
    left: 1em;
    z-index: 1;
    width: 2.3em;
    height: 2.3em;
    background-color: #00b6e3;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
  
    & > .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
  
    .plus-icon {
      display: inline;
    }
    .multiply-icon {
      display: none;
    }
  
    &.show {
      .plus-icon {
        display: none;
      }
      .multiply-icon {
        display: inline;
      }
    }
  
    .btn[data-toggle="dropdown"] {
      .tavasi::before {
        color: #fff;
      }
    }
  
    .dropdown-menu.show {
      // top: -10px !important;
      // padding-top: 1.5em;
      // padding-bottom: 1.5em;
    }
    .dropdown-item {
      text-align: right;
      font-family: "sahel-semi-bold";
      display: flex;
      align-items: center;
      margin-bottom: 0.7em;
      font-size: 0.8rem;
  
      color: #666;
  
      .tavasi {
        margin-left: 0.5em;
      }
    }
  }
  
  .search-filter {
    .input-group-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      // border: 1px solid #ddd;
    }
  
    .input-group-append {
      .input-group-text {
        border-top-right-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
        background-color: transparent;
      }
    }
    .input-group-prepend {
      .input-group-text {
        background-color: transparent;
        border-top-left-radius: 0.5em;
        border-bottom-left-radius: 0.5em;
      }
    }
  
    .form-control {
      border-left: 0;
  
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
  
      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        -webkit-appearance: none;
      }
    }
    .dropdown-item {
      text-align: right;
      font-family: "sahel-semi-bold";
      display: flex;
      align-items: center;
      margin-bottom: 0.7em;
      font-size: 0.8rem;
  
      .icon {
        margin-left: 0.2em;
      }
    }
  }
  
  .create-forms {
    position: fixed;
    right: 3.5em;
    top: 0;
    bottom: 0;
    min-width: 20em;
    background-color: #fff;
    width: 0;
    width: 100%;
    max-width: 20em;
    z-index: 2;
    overflow: hidden;
    padding: 1em 2em;
  
    .form-control,
    label,
    .btn {
      font-size: 0.8rem;
    }
  }
  
  .create-group-inner-form {
    & > .btn {
      margin-right: 0.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
  
      width: 2em;
      height: 2em;
      background-color: #00b6e3;
      border-radius: 50%;
    }
  
    .plus-icon {
      display: inline;
    }
    .multiply-icon {
      display: none;
    }
  
    &.show {
      .plus-icon {
        display: none;
      }
      .multiply-icon {
        display: inline;
      }
    }
  
    .btn[data-toggle="dropdown"] {
      .tavasi::before {
        color: #fff;
      }
    }
  
    .dropdown-menu.show {
      width: 17em;
      text-align: right;
      padding: 1.5em 1em;
    }
    .dropdown-item {
      text-align: right;
      display: flex;
      align-items: center;
      margin-bottom: 0.7em;
      color: #666;
      .tavasi {
        margin-left: 0.5em;
      }
    }
  }
  </style>
  
  <style lang="scss">
  .picture-input input[type="file"],
  #fileInput {
    display: none !important;
  }
  
  .image-uploader-container {
    position: relative;
    // border: 2px dashed #eee;
    padding: 0.2em;
  
    &.hide-preview {
      .upload-label {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        width: auto !important;
        overflow: hidden;
        .tavasi,
        img {
          visibility: hidden;
        }
      }
    }
  
    .upload-label {
      .tavasi {
        font-size: 4rem;
      }
  
      &:hover {
        cursor: pointer;
      }
    }
  
    .img-preview {
      width: 300px;
      max-width: 100%;
      height: auto;
      max-height: 200px;
      object-fit: contain;
    }
  }
  </style>
  
  <!-- start: mehdi -->
  <style scoped lang="scss">
  .input-group {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: nowrap;
  }
  
  .nav-icon-container {
    font-size: 0.875rem;
    color: #a0acb8;
  }
  
  //mehdi
  
  @media (min-width: 992px) {
    .open {
      display: none;
    }
    .home-list__header {
      padding-top: 1em;
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .hidden-heder {
      display: none;
    }
    .menu-bar__content {
      position: fixed;
      top: 0rem !important;
      right: 3rem !important;
      right: 2rem;
      background-color: #fff;
      z-index: 9;
    }
    .open {
      display: none;
    }
  }
  
  @media only screen and (min-width: 576px) and (max-width: 766.98px) {
    .hidden-heder {
      display: none;
    }
    .menu-bar__content {
      position: fixed;
  
      right: 0rem !important;
      background-color: #fff;
      z-index: 9;
      // max-width: 25em;
      // max-width: 20em;
      width: auto;
      min-width: 100% !important;
    }
  
    .navbar {
      width: 100%;
      height: 4.1rem;
      position: relative;
      left: 0.3rem;
      display: flex;
      align-items: center;
      //background-color: red;
      .navbar-grow {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        div {
          margin-left: 1.2rem;
        }
      }
    }
  
    .hover-border {
      position: relative;
      border: 2px solid transparent;
      border-radius: 5px;
      transition: transform 0.3s ease;
    }
    .hover-border:hover {
      transform: translateY(-5px);
      .nav-icon-container {
        color: black !important;
      }
    }
    .search-main {
      display: flex;
      flex-direction: row-reverse;
      position: absolute;
      z-index: 999;
      top: 24px;
      background-color: #fff;
      width: 100%;
      justify-content: center;
      // background-color: red;
      .button-search {
        position: relative;
        width: 35px;
        height: 31px;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 2px;
        border: none;
        background-color: #fff;
  
        &:hover {
          border-radius: 5px;
          border: 1px solid #a0acb8;
          background-color: #a0acb8;
          color: #fff;
        }
        span {
          position: absolute;
          top: 3px;
          right: 0px;
        }
      }
    }
    .hidean-search {
      display: none !important;
    }
    .hover-border1 {
      position: relative;
      top: 7px;
    }
  }
  
  @media (max-width: 575.98px) {
    .hidden-heder {
      display: none;
    }
    .menu-bar__content {
      position: fixed;
  
      right: 0rem !important;
      background-color: #fff;
      z-index: 9;
      // max-width: 25em;
      // max-width: 20em;
      width: auto;
      min-width: 100% !important;
    }
  
    .navbar {
      width: 100%;
      height: 4.1rem;
      position: relative;
      left: 0.3rem;
      display: flex;
      align-items: center;
      //background-color: red;
      .navbar-grow {
        width: 100%;
        display: flex;
        justify-content: space-between;
        div {
          margin-left: 1.2rem;
        }
      }
    }
  
    .hover-border {
      position: relative;
      border: 2px solid transparent;
      border-radius: 5px;
    }
    .hover-border:hover {
      .nav-icon-container {
        color: black !important;
      }
    }
    .hover-border1 {
      position: relative;
      top: 6px;
      right: 6px;
    }
    .search-main {
      display: flex;
      flex-direction: row-reverse;
      position: absolute;
      z-index: 999;
      top: 24px;
      background-color: #fff;
      // background-color: red;
      .button-search {
        position: relative;
        width: 35px;
        height: 31px;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 2px;
        border: none;
        background-color: #fff;
  
        &:hover {
          border-radius: 5px;
          border: 1px solid #a0acb8;
          background-color: #a0acb8;
          color: #fff;
        }
        span {
          position: absolute;
          top: 3px;
          right: 0px;
        }
      }
    }
    .hidean-search {
      display: none !important;
    }
    .home-list__content {
      top: -14px;
    }
    .navbar {
      top: -14px;
    }
  }
  
  //mehdi
  </style>