<nav-bar title="认识钟表" />

<view class="cr-page">
    <view class="cr-main">
        <preview-card
            id="previewCard"
            showRefresh="{{true}}"
            showFavorite="{{true}}"
            favorited="{{isPreviewFavorite}}"
            bind:canvas-ready="onCanvasReady"
            bind:refresh="onPreviewRefresh"
            bind:favorite="onPreviewFavorite" />

        <view class="cr-section">
            <text class="cr-section-title">时刻类型</text>
            <view class="cr-chip-row">
                <view
                    wx:for="{{timeModeOptions}}"
                    wx:key="id"
                    class="cr-chip {{timeMode === item.id ? 'cr-chip--active' : ''}}"
                    hover-class="cr-chip--pressed"
                    hover-start-time="0"
                    hover-stay-time="70"
                    data-mode="{{item.id}}"
                    bind:tap="onSelectTimeMode">
                    <view class="cr-chip__text">
                        <text class="cr-chip__label">{{item.label}}</text>
                        <text class="cr-chip__subtitle">{{item.subtitle}}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="cr-section">
            <text class="cr-section-title">练习类型</text>
            <view class="cr-chip-row">
                <view
                    wx:for="{{exerciseTypeOptions}}"
                    wx:key="id"
                    class="cr-chip {{exerciseType === item.id ? 'cr-chip--active' : ''}}"
                    hover-class="cr-chip--pressed"
                    hover-start-time="0"
                    hover-stay-time="70"
                    data-type="{{item.id}}"
                    bind:tap="onSelectExerciseType">
                    <view class="cr-chip__text">
                        <text class="cr-chip__label">{{item.label}}</text>
                        <text class="cr-chip__subtitle">{{item.subtitle}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

<preview-footer-actions
    disabled="{{!hasContent}}"
    bind:primary="exportToPrint"
    bind:secondary="onShare" />

<debug-publish-tools
    wx:if="{{isDevEnv && hasContent}}"
    id="debugPublishTools"
    visible="{{debugPublishVisible}}"
    loading="{{debugPublishLoading}}"
    meta="{{debugPublishMeta}}"
    bind:open="onOpenDebugPublish"
    bind:close="onCloseDebugPublish"
    bind:confirm="onConfirmDebugPublish" />

<share-guide-popup
    show="{{showShareDialog}}"
    bind:onClose="onCloseShareDialog"
    bind:onShareSuccess="onShareSuccess" />
