{# Django i18n No-Prefix Language Selector - List Style #}
{% load i18n %}
{# 
  Context variables:
  - languages: List of dicts with 'code', 'name', 'is_current', 'switch_url'
  - current_language: Current language code
  - current_language_name: Current language display name
  - style: Widget style (dropdown/list/inline)
  - next_url: Optional URL to redirect after language change
#}

<nav class="i18n-noprefix-selector i18n-noprefix-selector--list" aria-label="{% trans 'Language selection' %}">
  <h2 class="i18n-noprefix-selector__title visually-hidden">{% trans "Choose language" %}</h2>
  
  <ul class="i18n-noprefix-selector__list" role="list">
    {% for lang in languages %}
      <li class="i18n-noprefix-selector__item {% if lang.is_current %}i18n-noprefix-selector__item--active{% endif %}">
        {% if lang.is_current %}
          <span 
            class="i18n-noprefix-selector__current"
            aria-current="true"
            aria-label="{% trans 'Current language:' %} {{ lang.name }}"
          >
            <span class="i18n-noprefix-selector__text">{{ lang.name }}</span>
            <span class="i18n-noprefix-selector__indicator" aria-hidden="true">✓</span>
          </span>
        {% else %}
          <a 
            href="{{ lang.switch_url }}"
            class="i18n-noprefix-selector__link"
            lang="{{ lang.code }}"
            hreflang="{{ lang.code }}"
            aria-label="{% trans 'Switch to' %} {{ lang.name }}"
          >
            <span class="i18n-noprefix-selector__text">{{ lang.name }}</span>
          </a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>

{# CSS helper classes for common frameworks #}
{% comment %}
Bootstrap 5 compatibility:
- Add class="list-group" to ul element
- Add class="list-group-item" to li elements
- Add class="list-group-item active" for current language
- Add class="text-decoration-none" to links

Tailwind CSS compatibility:
- Add class="space-y-2" to ul element
- Add class="block px-4 py-2 hover:bg-gray-100" to links
- Add class="bg-blue-500 text-white px-4 py-2 rounded" for current
- Add class="sr-only" instead of "visually-hidden"

Material UI style:
- Add class="mdc-list" to ul element
- Add class="mdc-list-item" to li elements
- Add class="mdc-list-item--activated" for current language

Pure CSS example:
.i18n-noprefix-selector--list {
  padding: 0;
}

.i18n-noprefix-selector__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.i18n-noprefix-selector__item {
  margin-bottom: 0.5rem;
}

.i18n-noprefix-selector__link,
.i18n-noprefix-selector__current {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.25rem;
  transition: background-color 0.2s;
}

.i18n-noprefix-selector__link:hover {
  background-color: #f5f5f5;
}

.i18n-noprefix-selector__item--active .i18n-noprefix-selector__current {
  background-color: #007bff;
  color: white;
  font-weight: 600;
}

.i18n-noprefix-selector__indicator {
  margin-left: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
{% endcomment %}