{%- comment -%}
  <!-- Custom field for size-related questions (horizontal bars) -->
{%- endcomment -%}

<table>
  <tbody>
  {%- for row_index in (0..2) -%}
    {%- if question.answer_options -%}
      {%- assign option_name = question.answer_options[row_index] -%}
    {%- endif -%}
    <tr>
      <td width="13px"></td>
      <td width="20px">
        <input type="radio" name="fields[{{ question_slug }}]" value="{{ row_index | plus: 1 }}"/>
      </td>
      <td class="custom-field-option">{{ option_name }}</td>
      <td width="5px"></td>
      <td>
        <table style="border-spacing:0;">
          {%- for current_bar_index in (0..4) -%}
            {%- if row_index == 0 and current_bar_index == 0 -%}
              {%- assign size_bar_class = 'offset' -%}
              {%- elsif row_index == 2 and current_bar_index == 4 -%}
              {%- assign size_bar_class = 'offset' -%}
              {%- elsif row_index == 1 and current_bar_index == 2 -%}
              {%- assign size_bar_class = 'fit' -%}
            {%- else -%}
              {%- assign size_bar_class = 'empty' -%}
            {%- endif -%}
            <td class="yotpo-size-bar yotpo-size-bar-{{ size_bar_class }}"></td>
            <td class="yotpo-size-bar-divider"></td>
          {%- endfor -%}
        </table>
      </td>
    </tr>
  {%- endfor -%}
  </tbody>
</table>