<div class="model-stats-block {{ block.settings.visibility }}" 
     style="margin-top: {{ block.settings.margin_top }}px; margin-bottom: {{ block.settings.margin_bottom }}px;">
  <div class="model-stats-header">
    <span style="color: {{ block.settings.header_text_color }};">{{ block.settings.header_text }}</span>
    
    {% comment %} Check if both measurement systems have values {% endcomment %}
    {% assign has_metric = false %}
    {% assign has_imperial = false %}
    
    {% if block.settings.height_cm != blank or block.settings.bust_cm != blank or block.settings.waist_cm != blank or block.settings.hips_cm != blank %}
      {% assign has_metric = true %}
    {% endif %}
    
    {% if block.settings.height_ft != blank or block.settings.height_in != blank or block.settings.bust_in != blank or block.settings.waist_in != blank or block.settings.hips_in != blank %}
      {% assign has_imperial = true %}
    {% endif %}
    
    {% if has_metric and has_imperial %}
      <div class="model-stats-toggle" 
           style="background-color: {{ block.settings.toggle_bg_color }}; border-radius: {{ block.settings.toggle_border_radius }}px;">
        {% if block.settings.default_unit == 'metric' %}
          <div id="metric-{{ block.id }}" class="toggle-btn btn-active"
               style="border-radius: {{ block.settings.toggle_border_radius }}px; background-color: {{ block.settings.toggle_active_bg }}; color: {{ block.settings.toggle_active_text }};">
            CM
          </div>
          <div id="imperial-{{ block.id }}" class="toggle-btn"
               style="border-radius: {{ block.settings.toggle_border_radius }}px; color: {{ block.settings.toggle_text_color }};">
            IN
          </div>
        {% else %}
          <div id="imperial-{{ block.id }}" class="toggle-btn btn-active"
               style="border-radius: {{ block.settings.toggle_border_radius }}px; background-color: {{ block.settings.toggle_active_bg }}; color: {{ block.settings.toggle_active_text }};">
            IN
          </div>
          <div id="metric-{{ block.id }}" class="toggle-btn"
               style="border-radius: {{ block.settings.toggle_border_radius }}px; color: {{ block.settings.toggle_text_color }};">
            CM
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>
  
  <div class="model-stats-body">
    <div class="model-stats-card">
      {% if block.settings.show_model_image %}
        <div class="model-image" 
             style="border-radius: {{ block.settings.image_border_radius }}px;">
          {% if block.settings.model_image %}
            <img src="{{ block.settings.model_image | img_url: '120x120' }}" 
                 alt="{{ block.settings.model_name }}" 
                 loading="lazy">
          {% else %}
            <div class="placeholder-image"></div>
          {% endif %}
        </div>
      {% endif %}
      
      <div class="model-info" style="color: {{ block.settings.stats_text_color }};">
        {% if block.settings.model_name != blank %}
          <div class="model-name" style="color: {{ block.settings.model_name_color }};">
            {{ block.settings.model_name }}
          </div>
        {% endif %}
        
        <div class="stats-grid">
          {% if block.settings.height_cm != blank or block.settings.height_ft != blank %}
            <div class="stat-item">
              <label>{{ block.settings.height_label | default: 'Height' }}:</label>
              <span class="stat-value">
                {% if has_metric and has_imperial %}
                  {% if block.settings.default_unit == 'metric' %}
                    <span class="metric-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.height_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.height_ft }}'{{ block.settings.height_in }}"
                    </span>
                  {% else %}
                    <span class="metric-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.height_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.height_ft }}'{{ block.settings.height_in }}"
                    </span>
                  {% endif %}
                {% elsif has_metric %}
                  <span>{{ block.settings.height_cm }} cm</span>
                {% else %}
                  <span>{{ block.settings.height_ft }}'{{ block.settings.height_in }}"</span>
                {% endif %}
              </span>
            </div>
          {% endif %}
          
          {% if block.settings.bust_cm != blank or block.settings.bust_in != blank %}
            <div class="stat-item">
              <label>{{ block.settings.bust_label | default: 'Bust' }}:</label>
              <span class="stat-value">
                {% if has_metric and has_imperial %}
                  {% if block.settings.default_unit == 'metric' %}
                    <span class="metric-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.bust_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.bust_in }} in
                    </span>
                  {% else %}
                    <span class="metric-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.bust_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.bust_in }} in
                    </span>
                  {% endif %}
                {% elsif has_metric %}
                  <span>{{ block.settings.bust_cm }} cm</span>
                {% else %}
                  <span>{{ block.settings.bust_in }} in</span>
                {% endif %}
              </span>
            </div>
          {% endif %}
          
          {% if block.settings.waist_cm != blank or block.settings.waist_in != blank %}
            <div class="stat-item">
              <label>{{ block.settings.waist_label | default: 'Waist' }}:</label>
              <span class="stat-value">
                {% if has_metric and has_imperial %}
                  {% if block.settings.default_unit == 'metric' %}
                    <span class="metric-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.waist_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.waist_in }} in
                    </span>
                  {% else %}
                    <span class="metric-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.waist_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.waist_in }} in
                    </span>
                  {% endif %}
                {% elsif has_metric %}
                  <span>{{ block.settings.waist_cm }} cm</span>
                {% else %}
                  <span>{{ block.settings.waist_in }} in</span>
                {% endif %}
              </span>
            </div>
          {% endif %}
          
          {% if block.settings.hips_cm != blank or block.settings.hips_in != blank %}
            <div class="stat-item">
              <label>{{ block.settings.hips_label | default: 'Hips' }}:</label>
              <span class="stat-value">
                {% if has_metric and has_imperial %}
                  {% if block.settings.default_unit == 'metric' %}
                    <span class="metric-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.hips_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.hips_in }} in
                    </span>
                  {% else %}
                    <span class="metric-value-{{ block.id }}" style="display: none;">
                      {{ block.settings.hips_cm }} cm
                    </span>
                    <span class="imperial-value-{{ block.id }}" style="display: flex;">
                      {{ block.settings.hips_in }} in
                    </span>
                  {% endif %}
                {% elsif has_metric %}
                  <span>{{ block.settings.hips_cm }} cm</span>
                {% else %}
                  <span>{{ block.settings.hips_in }} in</span>
                {% endif %}
              </span>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .model-stats-block {
    position: relative;
    background-color: #ffffff;
  }

  .model-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    margin-bottom: 16px;
  }

  .model-stats-toggle {
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: center;
  }

  .toggle-btn {
    display: flex;
    width: 40px;
    font-size: 12px;
    height: 24px;
    padding: 5px 12px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .toggle-btn.btn-active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .model-stats-card {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .model-image {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background-color: #eaeaea;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .model-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .placeholder-image {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .model-info {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
  }

  .model-name {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 13px;
  }

  .stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .stat-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .stat-value {
    margin-left: 4px;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  initializeToggle();
});

// Also listen for Shopify theme editor events
document.addEventListener('shopify:section:load', function() {
  initializeToggle();
});

document.addEventListener('shopify:block:select', function() {
  initializeToggle();
});

function initializeToggle() {
  const blockId = '{{ block.id }}';
  const metricBtn = document.getElementById('metric-' + blockId);
  const imperialBtn = document.getElementById('imperial-' + blockId);
  const metricValues = document.querySelectorAll('.metric-value-' + blockId);
  const imperialValues = document.querySelectorAll('.imperial-value-' + blockId);

  // If toggle buttons don't exist (only one measurement system), exit
  if (!metricBtn || !imperialBtn) return;

  function showMetric() {
    metricValues.forEach(value => {
      value.style.display = 'flex';
    });
    imperialValues.forEach(value => {
      value.style.display = 'none';
    });
    
    metricBtn.classList.add('btn-active');
    metricBtn.style.backgroundColor = '{{ block.settings.toggle_active_bg }}';
    metricBtn.style.color = '{{ block.settings.toggle_active_text }}';
    
    imperialBtn.classList.remove('btn-active');
    imperialBtn.style.backgroundColor = 'transparent';
    imperialBtn.style.color = '{{ block.settings.toggle_text_color }}';
  }

  function showImperial() {
    metricValues.forEach(value => {
      value.style.display = 'none';
    });
    imperialValues.forEach(value => {
      value.style.display = 'flex';
    });
    
    imperialBtn.classList.add('btn-active');
    imperialBtn.style.backgroundColor = '{{ block.settings.toggle_active_bg }}';
    imperialBtn.style.color = '{{ block.settings.toggle_active_text }}';
    
    metricBtn.classList.remove('btn-active');
    metricBtn.style.backgroundColor = 'transparent';
    metricBtn.style.color = '{{ block.settings.toggle_text_color }}';
  }

  // Remove existing event listeners to prevent duplicates
  metricBtn.removeEventListener('click', showMetric);
  imperialBtn.removeEventListener('click', showImperial);
  
  // Add event listeners
  metricBtn.addEventListener('click', showMetric);
  imperialBtn.addEventListener('click', showImperial);
}
</script>