<view class="page">
  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
    <view class="nav-back" bindtap="onBack">‹ {{i18n.common.back}}</view>
    <view class="page-header-title">{{i18n.manual.navTitle}}</view>
    <view class="page-header-subtitle">{{i18n.manual.navSubtitle}}</view>
  </view>

  <view class="page-content">
    <view class="page-title">{{i18n.manual.functionTitle}}</view>

    <view class="func-grid">
      <view
        wx:for="{{functions}}"
        wx:key="id"
        class="func-card {{selectedFunctionId === item.id ? 'active' : ''}}"
        style="{{selectedFunctionId === item.id ? 'border-color:' + item.color + ';' : ''}}"
        bindtap="onSelectFunction"
        data-id="{{item.id}}">
        <view class="func-dot" style="background: {{item.color}};"></view>
        <view class="func-name">{{i18n.manual.functions[item.id].name}}</view>
        <view class="func-wl" style="color: {{item.color}};">{{i18n.common.wavelengths[item.wl]}}</view>
        <view class="func-benefit">{{i18n.manual.functions[item.id].benefit}}</view>
      </view>
    </view>

    <view class="page-title section-title">{{i18n.manual.regionTitle}}</view>
    <view class="region-grid">
      <view
        wx:for="{{regions}}"
        wx:key="key"
        class="region-chip {{item.checked ? 'active' : ''}}"
        bindtap="onToggleRegion"
        data-idx="{{index}}">
        {{i18n.common.regions[item.key]}}
      </view>
    </view>

    <view class="page-title section-title">{{i18n.manual.durationTitle}}</view>
    <view class="segmented">
      <view
        wx:for="{{durationOptions}}"
        wx:key="min"
        class="segment {{selectedMinutes === item.min ? 'active' : ''}}"
        bindtap="onSelectDuration"
        data-min="{{item.min}}">
        {{item.label}}
      </view>
    </view>

    <view class="safety-tip">{{i18n.manual.safetyTip}}</view>

    <button class="btn-primary" bindtap="onStart" disabled="{{submitting}}" loading="{{submitting}}">
      {{submitting ? i18n.manual.starting : i18n.manual.start}}
    </button>

    <view class="error-text" wx:if="{{error}}">{{error}}</view>
  </view>
</view>
