{% load i18n %}

{% if serializer_info %}
<div class="dcr-section-header dcr-mt-lg">
  <h2 class="dcr-section-header__title">{% trans "DRF Serializer" %}</h2>
</div>

<dl class="dcr-dl">
  <div class="dcr-dl__row">
    <dt class="dcr-dl__label">{% trans "Serializer Class" %}</dt>
    <dd class="dcr-dl__value dcr-dl__value--mono">{{ serializer_info.serializer_class }}</dd>
  </div>
</dl>

{% if serializer_info.fields %}
<div class="dcr-data-table">
  <div class="dcr-data-table__scroll">
    <table>
      <thead>
        <tr>
          <th>{% trans "Field" %}</th>
          <th>{% trans "Type" %}</th>
          <th class="dcr-col--right">{% trans "Required" %}</th>
          <th class="dcr-col--right">{% trans "Read Only" %}</th>
          <th>{% trans "Description" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for field in serializer_info.fields %}
        <tr>
          <td><code class="dcr-code">{{ field.name }}</code></td>
          <td><span class="dcr-badge dcr-badge--purple">{{ field.type }}</span></td>
          <td class="dcr-col--right">
            {% if field.required %}
            <span class="dcr-text-success">&#10003;</span>
            {% else %}
            <span class="dcr-text-muted">&mdash;</span>
            {% endif %}
          </td>
          <td class="dcr-col--right">
            {% if field.read_only %}
            <span class="dcr-text-success">&#10003;</span>
            {% else %}
            <span class="dcr-text-muted">&mdash;</span>
            {% endif %}
          </td>
          <td class="dcr-text-muted">{{ field.help_text|default:"-" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endif %}