102 lines
4.7 KiB
HTML
102 lines
4.7 KiB
HTML
{% load allauth %}
|
|
{% if attrs.type == "checkbox" or attrs.type == "radio" %}
|
|
<div class="mb-3 flex items-start gap-3">
|
|
<input {% if attrs.required %}required{% endif %}
|
|
name="{{ attrs.name }}"
|
|
class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
|
|
id="{{ attrs.id }}"
|
|
{% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
|
|
{% if attrs.disabled %}disabled{% endif %}
|
|
type="{{ attrs.type }}">
|
|
<label class="text-sm font-medium text-slate-700" for="{{ attrs.id }}">
|
|
{% slot label %}
|
|
{% endslot %}
|
|
</label>
|
|
{% if slots.help_text %}
|
|
<div class="text-xs text-slate-500">
|
|
{% slot help_text %}
|
|
{% endslot %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% elif attrs.type == "textarea" %}
|
|
<div class="mb-3">
|
|
<label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
|
|
{% slot label %}
|
|
{% endslot %}
|
|
</label>
|
|
<textarea {% if attrs.required %}required{% endif %}
|
|
{% if attrs.rows %}rows="{{ attrs.rows }}"{% endif %}
|
|
class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
name="{{ attrs.name }}"
|
|
{% if attrs.readonly %}readonly{% endif %}
|
|
id="{{ attrs.id }}"
|
|
{% if attrs.disabled %}disabled{% endif %}>{% slot value %}{% endslot %}</textarea>
|
|
</div>
|
|
{% elif attrs.type == "hidden" %}
|
|
<input {% if attrs.required %}required{% endif %}
|
|
name="{{ attrs.name }}"
|
|
id="{{ attrs.id }}"
|
|
{% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
|
|
type="hidden">
|
|
{% elif attrs.type == "select" %}
|
|
<div class="mb-3">
|
|
{% if not attrs.unlabeled %}
|
|
<label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
|
|
{% slot label %}
|
|
{% endslot %}
|
|
</label>
|
|
{% endif %}
|
|
<select id="{{ attrs.id }}"
|
|
name="{{ attrs.name }}"
|
|
class="block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
{% for option in attrs.choices %}
|
|
<option {% if option.0 == attrs.value %}selected{% endif %}
|
|
value="{{ option.0 }}">{{ option.1 }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% if attrs.unlabeled %}
|
|
<label class="sr-only" for="{{ attrs.id }}">
|
|
{% slot label %}
|
|
{% endslot %}
|
|
</label>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<div class="mb-3">
|
|
{% if not attrs.unlabeled %}
|
|
<label class="mb-1 block text-sm font-medium text-slate-700" for="{{ attrs.id }}">
|
|
{% slot label %}
|
|
{% endslot %}
|
|
</label>
|
|
{% endif %}
|
|
<input {% if attrs.required %}required{% endif %}
|
|
name="{{ attrs.name }}"
|
|
{% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}" {% elif attrs.unlabeled %}placeholder="{% slot label %}{% endslot %}"{% endif %}
|
|
class="block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 {% if attrs.errors %}border-red-500 focus:border-red-500 focus:ring-red-500{% else %}border-slate-300 focus:border-blue-500 focus:ring-blue-500{% endif %}"
|
|
id="{{ attrs.id }}"
|
|
{% if attrs.readonly %}readonly{% endif %}
|
|
{% if attrs.disabled %}disabled{% endif %}
|
|
{% if attrs.tabindex %}tabindex="{{ attrs.tabindex }}"{% endif %}
|
|
{% if attrs.style %}style="{{ attrs.style }}"{% endif %}
|
|
{% if attrs.autocomplete %}autocomplete="{{ attrs.autocomplete }}"{% endif %}
|
|
{% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
|
|
type="{{ attrs.type }}">
|
|
{% if attrs.unlabeled %}
|
|
<label class="sr-only" for="{{ attrs.id }}">
|
|
{% slot label %}
|
|
{% endslot %}
|
|
</label>
|
|
{% endif %}
|
|
{% if slots.help_text %}
|
|
<div class="mt-1 text-xs text-slate-500">
|
|
{% slot help_text %}
|
|
{% endslot %}
|
|
</div>
|
|
{% endif %}
|
|
{% if attrs.errors %}
|
|
{% for error in attrs.errors %}<div role="alert" class="mt-1 text-xs text-red-600">{{ error }}</div>{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|