<view wx:if="{{show}}" class="live-countdown-container {{isDarkTheme ? 'live-countdown-container-dark' : ''}}">
  <block wx:if="{{isLandscape}}">
    <view class="live-countdown-container-landscape {{showReservationEntry ? '' : 'live-countdown-container-landscape-only'}}">
      <view class="live-countdown-panel {{showReservationEntry ? '' : 'live-countdown-panel-only'}}">
        <text class="live-countdown-label">距离直播开始还有</text>
        <view class="live-countdown-time-box">
          <text wx:if="{{countdown.d > 0}}" class="live-countdown-num">{{countdown.d}}</text>
          <text wx:if="{{countdown.d > 0}}" class="live-countdown-unit">天</text>
          <text class="live-countdown-num">{{countdown.h}}</text>
          <text class="live-countdown-unit">时</text>
          <text class="live-countdown-num">{{countdown.m}}</text>
          <text class="live-countdown-unit">分</text>
          <text class="live-countdown-num">{{countdown.s}}</text>
          <text class="live-countdown-unit">秒</text>
        </view>
      </view>
      <view
        wx:if="{{showReservationEntry}}"
        class="live-countdown-btn-landscape {{isReserved ? 'live-countdown-btn-done' : ''}}"
        bindtap="onReservationTap"
      >
        <text wx:if="{{isReserved}}">已预约</text>
        <text wx:else>立即预约</text>
      </view>
    </view>
  </block>

  <view wx:else class="live-countdown-portrait-container {{showReservationEntry ? '' : 'live-countdown-portrait-container-only'}}">
    <view class="live-countdown-portrait-left">
      <text class="live-countdown-portrait-label">距离直播开始还有</text>
      <view class="live-countdown-portrait-time">
        <text wx:if="{{countdown.d > 0}}" class="live-countdown-portrait-num">{{countdown.d}}</text>
        <text wx:if="{{countdown.d > 0}}" class="live-countdown-portrait-unit">天</text>
        <text class="live-countdown-portrait-num">{{countdown.h}}</text>
        <text class="live-countdown-portrait-unit">时</text>
        <text class="live-countdown-portrait-num">{{countdown.m}}</text>
        <text class="live-countdown-portrait-unit">分</text>
        <text class="live-countdown-portrait-num">{{countdown.s}}</text>
        <text class="live-countdown-portrait-unit">秒</text>
      </view>
    </view>

    <view wx:if="{{showReservationEntry}}" class="live-countdown-portrait-right">
      <view
        class="live-countdown-portrait-btn {{isReserved ? 'live-countdown-portrait-btn-done' : ''}}"
        bindtap="onReservationTap"
      >
        <text wx:if="{{isReserved}}">已预约</text>
        <text wx:else>立即预约</text>
      </view>
    </view>
  </view>

  <reservation-modal
    sdkInstance="{{sdkInstance}}"
    visible="{{modalVisible}}"
    bind:success="onReservationSuccess"
    bind:close="onModalClose"
  />
</view>
