{# tag_me/templates/tag_me/tag_me_mobile_footer.html #}
{% comment %}
  MOBILE STICKY FOOTER
  Always visible at bottom of dropdown with Help/Management links
  Only shows if URLs are provided
{% endcomment %}
<!-- Mobile Footer (only show if links exist) -->
<div x-show="hasLinks"
     class="tm:sticky tm:bottom-0 tm:z-sticky tm:w-full tm:py-3 tm:px-4 tm:bg-surface-container-highest-lib tm:border-t tm:border-outline-variant-lib tm:rounded-b-md">
    <div class="tm:flex tm:items-center tm:justify-center tm:gap-6">
        <!-- Help Link -->
        <a x-show="helpUrl"
           :href="helpUrl"
           target="_blank"
           class="tm:inline-flex tm:items-center tm:gap-2 tm:min-w-[44px] tm:min-h-[44px] tm:px-3 tm:py-2 tm:text-sm tm:font-medium tm:text-on-surface-variant-lib tm:rounded-lg tm:transition-colors tm:duration-150 hover:tm:text-on-surface-lib hover:tm:bg-surface-container-high-lib tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-primary-lib tm:focus:ring-offset-2 tm:focus:ring-offset-surface-container-highest-lib"
           aria-label="Help">
            <svg xmlns="http://www.w3.org/2000/svg"
                 class="tm:h-5 tm:w-5 tm:flex-shrink-0"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
                 stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
            </svg>
            <span>Help</span>
        </a>
        <!-- Management Link -->
        <a x-show="mgmtUrl"
           :href="mgmtUrl"
           target="_blank"
           class="tm:inline-flex tm:items-center tm:gap-2 tm:min-w-[44px] tm:min-h-[44px] tm:px-3 tm:py-2 tm:text-sm tm:font-medium tm:text-on-surface-variant-lib tm:rounded-lg tm:transition-colors tm:duration-150 hover:tm:text-on-surface-lib hover:tm:bg-surface-container-high-lib tm:focus:outline-none tm:focus:ring-2 tm:focus:ring-primary-lib tm:focus:ring-offset-2 tm:focus:ring-offset-surface-container-highest-lib"
           aria-label="Tag Management">
            <svg xmlns="http://www.w3.org/2000/svg"
                 class="tm:h-5 tm:w-5 tm:flex-shrink-0"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
                 stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
            </svg>
            <span>Manage</span>
        </a>
    </div>
</div>
{% comment %}
TEMPLATE CLASS MIGRATION - MOBILE FOOTER (MD3 REFACTOR v3.0)
=============================================================
Date: December 06, 2025
Migration: MD3 Elevation Alignment with Datetime Component

CHANGES APPLIED:
✅ Footer container:
   - bg-surface-container-lib → bg-surface-container-highest-lib [1→4]
   - Matches datetime footer elevation
   - Creates clear visual separation as action area

✅ Both links (2 instances):
   1. hover:bg-surface-container-high-lib - INVERTED to go DOWN on hover [4→3]
      - Since footer is now at highest [4], hover goes to high [3]
      - This creates a subtle "pressed" effect instead of elevation
   2. ring-offset-surface-container-lib → ring-offset-surface-container-highest-lib [1→4]
      - Ring offset must match parent footer surface

ELEVATION CONTEXT:
- Footer is now at surface-container-highest-lib [4] (matches datetime)
- Hover state goes DOWN to surface-container-high-lib [3] for "pressed" feel
- This is intentional: at the highest level, hover creates inset rather than elevation

AFFECTED ELEMENTS:
1. Footer container background
2. Help link (hover + ring offset)
3. Management link (hover + ring offset)

NO OTHER CHANGES:
- Alpine.js: unchanged
- HTMX: unchanged
- HTML structure: unchanged
- Spacing/layout: unchanged
- Z-index: unchanged (z-sticky still 1020)
- Non-MD3 classes: unchanged
{% endcomment %}