{% extends "tools/_tool.jinja" %}

{% block tool_content %}

    <div class="px-xs mt-s">

        <label for="uuid-generator-option-type" class="mr-xs">{{ l10n("type.label", tool_id, user_lang) }}:</label>
        <select name="uuid-generator-option-type" id="uuid-generator-option-type" class="p-xxs border r-s">
            <option value="type-uuid4" selected>{{ l10n("type.uuid4", tool_id, user_lang) }}</option>
            <option value="type-guid">{{ l10n("type.guid", tool_id, user_lang) }}</option>
        </select>

        <br>

        <label for="uuid-generator-option-count" class="mr-xs">{{ l10n("option.count", tool_id, user_lang) }}:</label>
        <input id="uuid-generator-option-count" class="p-xxs border r-s" type="number" value="4" min="1" max="1000">

        <br>

        <label for="uuid-generator-option-hyphens" class="mr-xxs">{{ l10n("option.hyphen", tool_id, user_lang) }}:</label>
        <input id="uuid-generator-option-hyphens" type="checkbox" checked>

        <hr class="subtle">

        <button id="uuid-generator-generate" class="p-xs r-s border b-light success">
            <i class="fa-duotone fa-solid fa-gears mr-xs"></i>{{ l10n("generate", tool_id, user_lang) }}
        </button>
        <button id="uuid-generator-download" class="p-xs r-s border b-light primary">
            <i class="fa-duotone fa-solid fa-download mr-xs"></i>{{ l10n("download", tool_id, user_lang) }}
        </button>

        <hr class="subtle">

        <label for="uuid-generator-preview" class="d-none">{{ l10n("preview.label", tool_id, user_lang) }}:</label>
        <textarea name="uuid-generator-preview" id="uuid-generator-preview" rows="16" class="w-full border r-s"></textarea>
    </div>

{% endblock %}