{#
  Button Macros
  =============
  Reusable button components for actions, navigation, and forms.

  Usage:
    {% from 'shared/macros/buttons.html' import btn, btn_primary, btn_secondary, btn_danger, action_button %}
    {{ btn_primary('Save Changes', icon='save', type='submit') }}
    {{ btn_secondary('Cancel', href='/back') }}
    {{ btn_danger('Delete', onclick='deleteItem()') }}
    {{ action_button('eye', 'viewItem()', 'blue', 'View details') }}
#}


{#
  Base Button
  ===========
  A flexible button component that can be styled as primary, secondary, etc.

  Parameters:
    - text: Button text
    - variant: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'ghost' (default: 'primary')
    - size: 'sm' | 'md' | 'lg' (default: 'md')
    - icon: Icon name (optional, uses $icon helper)
    - icon_position: 'left' | 'right' (default: 'left')
    - type: 'button' | 'submit' | 'reset' (default: 'button')
    - href: If provided, renders as <a> tag instead of <button>
    - onclick: JavaScript onclick handler
    - disabled: Alpine.js expression for disabled state
    - loading: Alpine.js expression for loading state
    - class_extra: Additional CSS classes
#}
{% macro btn(text, variant='primary', size='md', icon=none, icon_position='left', type='button', href=none, onclick=none, disabled=none, loading=none, class_extra='') %}
{% set variants = {
    'primary': 'text-white bg-purple-600 border-transparent hover:bg-purple-700 focus:shadow-outline-purple',
    'secondary': 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700',
    'danger': 'text-white bg-red-600 border-transparent hover:bg-red-700 focus:shadow-outline-red',
    'success': 'text-white bg-green-600 border-transparent hover:bg-green-700 focus:shadow-outline-green',
    'warning': 'text-white bg-yellow-600 border-transparent hover:bg-yellow-700 focus:shadow-outline-yellow',
    'ghost': 'text-gray-600 dark:text-gray-400 bg-transparent border-transparent hover:bg-gray-100 dark:hover:bg-gray-700'
} %}
{% set sizes = {
    'sm': 'px-3 py-1 text-xs',
    'md': 'px-4 py-2 text-sm',
    'lg': 'px-6 py-3 text-base'
} %}
{% set base_classes = 'inline-flex items-center font-medium leading-5 transition-colors duration-150 border rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed' %}

{% if href %}
<a href="{{ href }}" class="{{ base_classes }} {{ variants[variant] }} {{ sizes[size] }} {{ class_extra }}">
    {% if icon and icon_position == 'left' %}
    <span x-html="$icon('{{ icon }}', 'w-4 h-4 {{ 'mr-2' if text else '' }}')"></span>
    {% endif %}
    {{ text }}
    {% if icon and icon_position == 'right' %}
    <span x-html="$icon('{{ icon }}', 'w-4 h-4 {{ 'ml-2' if text else '' }}')"></span>
    {% endif %}
</a>
{% else %}
<button
    type="{{ type }}"
    {% if onclick %}@click="{{ onclick }}"{% endif %}
    {% if disabled %}:disabled="{{ disabled }}"{% endif %}
    class="{{ base_classes }} {{ variants[variant] }} {{ sizes[size] }} {{ class_extra }}"
>
    {% if loading %}
    <span x-show="{{ loading }}" x-html="$icon('spinner', 'w-4 h-4 {{ 'mr-2' if text else '' }}')"></span>
    {% endif %}
    {% if icon and icon_position == 'left' %}
    <span {% if loading %}x-show="!{{ loading }}"{% endif %} x-html="$icon('{{ icon }}', 'w-4 h-4 {{ 'mr-2' if text else '' }}')"></span>
    {% endif %}
    {{ text }}
    {% if icon and icon_position == 'right' %}
    <span {% if loading %}x-show="!{{ loading }}"{% endif %} x-html="$icon('{{ icon }}', 'w-4 h-4 {{ 'ml-2' if text else '' }}')"></span>
    {% endif %}
</button>
{% endif %}
{% endmacro %}


{# Convenience macros for common button types #}

{% macro btn_primary(text, icon=none, icon_position='left', type='button', href=none, onclick=none, disabled=none, loading=none, size='md') %}
{{ btn(text, 'primary', size, icon, icon_position, type, href, onclick, disabled, loading) }}
{% endmacro %}

{% macro btn_secondary(text, icon=none, icon_position='left', type='button', href=none, onclick=none, disabled=none, loading=none, size='md') %}
{{ btn(text, 'secondary', size, icon, icon_position, type, href, onclick, disabled, loading) }}
{% endmacro %}

{% macro btn_danger(text, icon=none, icon_position='left', type='button', href=none, onclick=none, disabled=none, loading=none, size='md') %}
{{ btn(text, 'danger', size, icon, icon_position, type, href, onclick, disabled, loading) }}
{% endmacro %}

{% macro btn_success(text, icon=none, icon_position='left', type='button', href=none, onclick=none, disabled=none, loading=none, size='md') %}
{{ btn(text, 'success', size, icon, icon_position, type, href, onclick, disabled, loading) }}
{% endmacro %}

{% macro btn_ghost(text, icon=none, icon_position='left', type='button', href=none, onclick=none, disabled=none, loading=none, size='md') %}
{{ btn(text, 'ghost', size, icon, icon_position, type, href, onclick, disabled, loading) }}
{% endmacro %}


{#
  Action Button (Icon Only)
  =========================
  A small icon button for table actions (view, edit, delete).

  Parameters:
    - icon: Icon name
    - onclick: JavaScript onclick handler
    - color: 'blue' | 'purple' | 'red' | 'green' | 'gray' (default: 'gray')
    - title: Tooltip text
    - disabled: Alpine.js expression for disabled state
    - href: If provided, renders as <a> tag
#}
{% macro action_button(icon, onclick=none, color='gray', title='', disabled=none, href=none) %}
{% set colors = {
    'blue': 'text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-gray-700',
    'purple': 'text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700',
    'red': 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700',
    'green': 'text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-gray-700',
    'gray': 'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700',
    'orange': 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-gray-700'
} %}
{% set base_classes = 'flex items-center justify-center p-2 rounded-lg focus:outline-none transition-colors disabled:opacity-50 disabled:cursor-not-allowed' %}

{% if href %}
<a href="{{ href }}" class="{{ base_classes }} {{ colors[color] }}" title="{{ title }}">
    <span x-html="$icon('{{ icon }}', 'w-5 h-5')"></span>
</a>
{% else %}
<button
    @click="{{ onclick }}"
    {% if disabled %}:disabled="{{ disabled }}"{% endif %}
    class="{{ base_classes }} {{ colors[color] }}"
    title="{{ title }}"
>
    <span x-html="$icon('{{ icon }}', 'w-5 h-5')"></span>
</button>
{% endif %}
{% endmacro %}


{#
  Action Button Group
  ===================
  A group of action buttons (typically for table rows).

  Usage:
    {{ action_button_group([
        {'icon': 'eye', 'onclick': 'view(item)', 'color': 'blue', 'title': 'View'},
        {'icon': 'edit', 'onclick': 'edit(item)', 'color': 'purple', 'title': 'Edit'},
        {'icon': 'delete', 'onclick': 'delete(item)', 'color': 'red', 'title': 'Delete'}
    ]) }}
#}
{% macro action_button_group(buttons) %}
<div class="flex items-center space-x-2 text-sm">
    {% for button in buttons %}
    {{ action_button(
        button.icon,
        button.get('onclick'),
        button.get('color', 'gray'),
        button.get('title', ''),
        button.get('disabled'),
        button.get('href')
    ) }}
    {% endfor %}
</div>
{% endmacro %}


{#
  Button Group
  ============
  A group of buttons with proper spacing.
#}
{% macro button_group(class_extra='') %}
<div class="flex items-center space-x-3 {{ class_extra }}">
    {{ caller() }}
</div>
{% endmacro %}


{#
  Back Button
  ===========
  A standardized back navigation button.

  Parameters:
    - href: URL to navigate back to
    - text: Button text (default: 'Back')
#}
{% macro back_button(href, text='Back') %}
<a href="{{ href }}"
   class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
    <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
    {{ text }}
</a>
{% endmacro %}


{#
  Submit Button with Loading
  ==========================
  A form submit button with built-in loading state.

  Parameters:
    - text: Button text
    - loading_text: Text shown while loading (default: 'Saving...')
    - loading_var: Alpine.js variable for loading state (default: 'saving')
    - icon: Icon name (default: 'save')
#}
{% macro submit_button(text='Save', loading_text='Saving...', loading_var='saving', icon='save') %}
<button
    type="submit"
    :disabled="{{ loading_var }}"
    class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
>
    <span x-show="{{ loading_var }}" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
    <span x-show="!{{ loading_var }}" x-html="$icon('{{ icon }}', 'w-4 h-4 mr-2')"></span>
    <span x-text="{{ loading_var }} ? '{{ loading_text }}' : '{{ text }}'"></span>
</button>
{% endmacro %}