{{ $now := now }}
{{ $currentDay := $now.Format "Monday" }}
{{ $currentTime := $now.Format "15:04" }}

<div class="opening-hours bg-white/5 dark:bg-pizza-darker/5 backdrop-blur-sm rounded-xl p-4 sm:p-6 mx-0 sm:mx-0">
    <h3 class="text-2xl font-bold mb-6 sm:mb-8 text-gray-900 dark:text-white">{{ i18n "opening_hours" }}</h3>
    
    <!-- Regular Hours -->
    <div class="space-y-2">
        {{ range .Site.Data.hours.regular_hours }}
            {{ $isOpen := and (in .days $currentDay) (ge $currentTime .open) (le $currentTime .close) }}
            <div class="hours-row {{ if $isOpen }}border-2 border-status-green{{ end }} 
                        bg-white dark:bg-pizza-darker rounded-xl p-4 transition-all duration-300"
                 data-day="{{ $currentDay }}"
                 data-open="{{ .open }}"
                 data-close="{{ .close }}"
                 data-delivery-until="{{ .delivery_until }}">
                <div class="flex justify-around items-center">
                    <div class="days-group">
                        {{ $numDays := len .days }}
                        {{ if eq $numDays 1 }}
                            <span class="text-lg font-medium text-gray-800 dark:text-gray-200">{{ index .days 0 }}</span>
                        {{ else if eq $numDays 2 }}
                            <span class="text-lg font-medium text-gray-800 dark:text-gray-200">{{ i18n (index .days 0) }} & {{ i18n (index .days 1) }}</span>
                        {{ else }}
                            {{ $lastIndex := sub $numDays 1 }}
                            {{ range $i, $day := .days }}
                                {{ if eq $i 0 }}
                                    <span class="text-lg font-medium text-gray-800 dark:text-gray-200">{{ i18n $day }}</span>
                                {{ else if eq $i $lastIndex }}
                                    <span class="text-lg font-medium text-gray-800 dark:text-gray-200"> - {{ i18n $day }}</span>
                                {{ end }}
                            {{ end }}
                        {{ end }}
                    </div>
                    <div class="text-right">
                        <div class="text-lg font-medium {{ if $isOpen }}text-status-green{{ else }}text-gray-700 dark:text-gray-300{{ end }}">
                            {{ .open }} - {{ .close }}
                        </div>
                        <div class="delivery-text {{ if $isOpen }}text-status-green{{ else }}text-status-red{{ end }}">
                            {{ i18n "delivery_until" }} {{ .close }}
                        </div>
                    </div>
                </div>
                
                <!-- Phone number - only shown when this time slot is open -->
                {{ if $isOpen }}
                    <div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
                        <a href="tel:{{ $.Site.Params.contact.phone }}" 
                           class="flex items-center text-status-green hover:text-status-green/80 transition-colors duration-300">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                            </svg>
                            <span class="font-medium"> {{ i18n "call_now" }}: {{ $.Site.Params.contact.phone }}</span>
                        </a>
                    </div>
                {{ end }}
            </div>
        {{ end }}
    </div>

    <!-- Holiday Notice -->
    {{ range .Site.Data.hours.holidays }}
        {{ $holidayDate := time .date }}
        {{ if eq ($now.Format "2006-01-02") ($holidayDate.Format "2006-01-02") }}
            <div class="mt-6 p-4 bg-pizza-red/10 dark:bg-pizza-red/20 rounded-xl border border-pizza-red/20">
                <div class="font-medium text-pizza-red">
                    {{ .name }}:
                    {{ if .closed }}
                        <span class="ml-2">{{ i18n "closed" }}</span>
                    {{ else }}
                        <span class="ml-2">{{ .open }} - {{ .close }} Uhr</span>
                        <div class="text-sm">
                            {{ i18n "delivery_until" }} {{ .delivery_until }} Uhr
                        </div>
                    {{ end }}
                </div>
            </div>
        {{ end }}
    {{ end }}

</div>