---
---

const features= [
  {
    "name": "Appscms feature",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms feature",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms feature",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms feature",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms home",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms home",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms home",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms home",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  },
  {
    "name": "Appscms home",
    "description": "Appscms feature layout with new design",
    "color": "#1A2EE7",
    "icon": "/assets/images/digipaint.svg",
    "url": "/appscms-feature"
  }
]
const featureList= document.querySelector('#appscms-tools-section-row')
const renderFeatures=(query)=> {
  featureList.innerHTML = "";
  const filteredFeatures = features.filter(feature => feature.name.toLowerCase().includes(query.toLowerCase()));
  filteredFeatures.forEach(item => {
      const listItem = document.createElement("div");
      const classNames = "col-xl-4 col-lg-6 col-md-6 appscms-tool-container";
      let classList = classNames.split(" ");
      classList.forEach(function(className) {
      listItem.classList.add(className);
      });
      listItem.innerHTML = `
          <a href="${item.url}">
            <div class="appscms-tool">
              <div class="tool-top" style="background-color: ${item.color};">
                <div class="tool-img">
                  <img crossorigin="anonymous" src="${item.icon}" alt="img" />
                </div>
                <div class="tool-text">${item.description}</div>
              </div>
              <div class="tool-heading">${item.name}</div>
            </div>
          </a>
      `;
      featureList.appendChild(listItem);
  });
}
const searchInput= document.querySelector('#search-features')
searchInput.addEventListener("input", function () {
  console.log('ok')
  const query = searchInput.value.trim();
  renderFeatures(query);
});