<div class="sw-users-permissions-role-view-general">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_users_permissions_role_role_view_general_card_view_basic_information %}
    <sw-card
        :title="$tc('sw-users-permissions.roles.detail.basicInformation')"
        position-identifier="sw-users-permissions-role-view-general"
    >
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_users_permissions_role_role_view_general_card_view_basic_information_name %}
        <sw-text-field
            v-model:value="role.name"
            name="sw-field--role-name"
            :error="roleNameError"
            :disabled="!acl.can('users_and_permissions.editor') || undefined"
            :label="$tc('sw-users-permissions.roles.detail.labelName')"
            required
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_users_permissions_role_role_view_general_card_view_basic_information_description %}
        <sw-textarea-field
            v-model:value="role.description"
            name="sw-field--role-description"
            :error="roleDescriptionError"
            :disabled="!acl.can('users_and_permissions.editor') || undefined"
            :label="$tc('sw-users-permissions.roles.detail.labelDescription')"
        />
        {% endblock %}
    </sw-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_users_permissions_role_role_view_general_card_view_permissions %}
    <sw-users-permissions-permissions-grid
        :role="role"
        :disabled="!acl.can('users_and_permissions.editor') || undefined"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_users_permissions_role_role_view_general_card_view_additional_permissions %}
    <sw-users-permissions-additional-permissions
        :role="role"
        :disabled="!acl.can('users_and_permissions.editor') || undefined"
    />
    {% endblock %}
</div>
