{{ define "main" }}
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="py-2 px-4 px-lg-5">
          <h1 class="mb-4 fw-bold">{{ .Title }}</h1>
          <p class="lead">{{ .Params.Description | markdownify }}</p>
          
          <div class="row mt-5">
            <div class="col-md-4 col-lg-3">
              <div class="sticky-top" style="top: 150px;">
                <h2 class="h4 fw-bold">Filters</h2>
                <hr>
                <p class="text-muted">Filter op kenmerken van de bedrijven.</p>

                <div id="builder-filters">
                  <div class="form-check mb-2">
                    <input class="form-check-input filter-checkbox" type="checkbox" value="eigen" id="filter-fabriek" data-filter="fabriek">
                    <label class="form-check-label small" for="filter-fabriek">
                      {{ i18n "label_filter_eigen_fabriek" | default "Eigen fabriek" }}
                    </label>
                  </div>

                  <div class="form-check mb-2">
                    <input class="form-check-input filter-checkbox" type="checkbox" value="mogelijk" id="filter-huur" data-filter="huur">
                    <label class="form-check-label small" for="filter-huur">
                      {{ i18n "label_filter_huur" | default "Huur mogelijk" }}
                    </label>
                  </div>

                  <div class="form-check mb-2">
                    <input class="form-check-input filter-checkbox" type="checkbox" value="mogelijk" id="filter-onderhoud" data-filter="onderhoud">
                    <label class="form-check-label small" for="filter-onderhoud">
                      {{ i18n "label_filter_onderhoud" | default "Onderhoud mogelijk" }}
                    </label>
                  </div>
                  
                  <button class="btn btn-sm btn-primary text-white mt-3" id="clear-filters" style="display:none;">
                    {{ i18n "clear_filters" | default "Filters wissen" }}
                  </button>
                </div>
              </div>
            </div>
            
            <div class="col-md-8 col-lg-9">
              <div class="row masonry-wrapper" id="builders-grid">
              {{ range .Params.builders }}
              <div class="mb-4 builder-card"
                data-fabriek="{{ .fabriek.type | default "onbekend" | plainify }}" 
                data-huur="{{ .huur.type | default "onbekend" | plainify }}" 
                data-onderhoud="{{ .onderhoud.type | default "onbekend" | plainify }}">

                <div class="card h-100 shadow-sm rounded border-0">
                  <div class="card-body d-flex flex-column">
                    
                    <div class="mb-1">
                      <h2 class="h3 card-title h5 fw-bold mb-1">{{ .name }}</h3>
                      <span class="badge bg-light text-primary border mt-2">{{ .specialty }}</span>
                    </div>
                    
                    <p class="card-text text-muted flex-grow-1">
                      {{ .description }}
                    </p>

                    <div class="bg-light rounded p-3 mt-2 mb-4">
                      <div class="row g-2">
                        
                        <div class="col-md-6 d-flex align-items-center">
                          <div class="position-relative me-3">
                            {{ $f := .fabriek }}
                            {{ $fColor := "text-muted opacity-25" }}
                            {{ if eq $f.type "eigen" }}{{ $fColor = "text-success" }}
                            {{ else if eq $f.type "partner" }}{{ $fColor = "text-success opacity-50" }}{{ end }}
                            
                            <i class="fas fa-industry {{ $fColor }} fa-fw"></i>
                            {{ if gt (int $f.aantal) 0 }}
                              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">
                                {{ $f.aantal }}
                              </span>
                            {{ end }}
                          </div>
                          <span class="small text-muted">{{ i18n (printf "label_fabriek_%s" ($f.type | default "onbekend")) }}</span>
                        </div>

                        <div class="col-md-6 d-flex align-items-center">
                          <i class="fas fa-file-contract fa-fw me-3 {{ if .vergunning }}text-success{{ else }}text-muted opacity-25{{ end }}"></i>
                          <span class="small text-muted">{{ i18n "label_vergunning" }}</span>
                        </div>

                        <div class="col-md-6 d-flex align-items-center">
                          {{ $o := .onderhoud }}
                          {{ $oColor := "text-muted opacity-25" }}
                          {{ if eq $o.type "mogelijk" }}{{ $oColor = "text-success" }}{{ end }}
                          
                          <i class="fas fa-tools fa-fw me-3 {{ $oColor }}"></i>
                          <span class="small text-muted">{{ i18n (printf "label_onderhoud_%s" ($o.type | default "onbekend")) }}</span>
                        </div>

                        <div class="col-md-6 d-flex align-items-center">
                          {{ $h := .huur }}
                            {{ $hColor := "text-muted opacity-25" }}
                            {{ if eq $h.type "mogelijk" }}{{ $hColor = "text-success" }}{{ end }}
                          <i class="fas fa-key fa-fw me-3 {{ $hColor }}"></i>
                          <span class="small text-muted">{{ i18n (printf "label_huur_%s" ($h.type | default "onbekend")) }}</span>
                        </div>

                      </div>
                    </div>
                    <div class="mt-auto">
                      <a class="btn btn-primary text-white py-2" href="{{ .url }}?source=mantelzorgwoning.info" target="_blank" rel="noopener">
                        {{ i18n "visit_website" }}
                      </a>
                      <a class="btn btn-outline py-2" href="mailto:{{ .email }}?subject={{ i18n "mail_subject" }}">
                        <i class="fas fa-envelope pe-1"></i> {{ i18n "send_email" }}
                      </a>
                    </div>

                  </div>
                </div>
              </div>
            {{ end }}
          </div>

          <div class="mt-5 pt-4 border-top">
            {{ .Content }}
          </div>

        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const grid = document.querySelector('#builders-grid');
  const msnry = new Masonry(grid, {
      itemSelector: '.builder-card',
      percentPosition: true,
      transitionDuration: '0.2s'
  });

  const checkboxes = document.querySelectorAll('.filter-checkbox');
  const cards = document.querySelectorAll('.builder-card');
  const clearBtn = document.getElementById('clear-filters');

  function norm(v) {
    return (v || "").trim().replace(/^"+|"+$/g, "").toLowerCase();
  }

  function filterCards() {
  let activeFilters = {};
  let hasActiveFilters = false;

  checkboxes.forEach(checkbox => {
      if (checkbox.checked) {
          activeFilters[checkbox.dataset.filter] = checkbox.value.trim();
          hasActiveFilters = true;
      }
  });

  cards.forEach(card => {
      let shouldShow = true;
      
      for (let filter in activeFilters) {
          const cardValue = norm(card.dataset[filter]);
          const filterValue = norm(activeFilters[filter]);

          if (cardValue !== filterValue) {
            shouldShow = false;
            break;
          }
      }

      if (shouldShow) {
          card.style.display = "block";
          card.classList.remove('is-filtered-out');
      } else {
          card.classList.add('is-filtered-out');
          card.style.display = "none";
      }
  });

  msnry.layout();
  
  clearBtn.style.display = hasActiveFilters ? "block" : "none";
}

  checkboxes.forEach(checkbox => {
      checkbox.addEventListener('change', filterCards);
  });

  clearBtn.addEventListener('click', function() {
      checkboxes.forEach(cb => cb.checked = false);
      filterCards();
  });
});
</script>
{{ end }}