<view class="age-page">
    <nav-bar title="按年龄学" />

    <view class="age-body">
        <scroll-view class="age-tab-scroll" scroll-x enable-flex>
            <view class="age-tab-scroll__inner">
                <view class="age-tab-row">
                    <view
                        wx:for="{{ageTabs}}"
                        wx:key="key"
                        class="age-tab {{activeAgeKey === item.key ? 'age-tab--active' : ''}}"
                        data-key="{{item.key}}"
                        bindtap="onAgeTabTap">
                        <text class="age-tab__range">{{item.rangeText}}</text>
                        <text class="age-tab__sub">{{item.subLabel}}</text>
                    </view>
                </view>
            </view>
        </scroll-view>

        <view class="age-panel age-goal-panel">
            <view class="age-goal-head">
                <view class="age-goal-head__icon-wrap">
                    <text class="age-goal-head__icon" aria-hidden="true"
                        >⭐</text
                    >
                </view>
                <text class="age-goal-head__title">{{goalTitle}}</text>
            </view>
            <view class="age-goal-list">
                <view
                    wx:for="{{abilityItems}}"
                    wx:key="title"
                    class="age-goal-item">
                    <view class="age-goal-item__top">
                        <text class="age-goal-item__emoji">{{item.icon}}</text>
                        <text class="age-goal-item__title">{{item.title}}</text>
                    </view>
                    <text class="age-goal-item__desc">{{item.desc}}</text>
                </view>
            </view>
        </view>

        <view class="age-path-head">
            <view class="age-path-head__left">
                <view class="age-path-head__bar" />
                <text class="age-path-head__title">4 周推荐学习路线</text>
            </view>
            <view class="age-path-head__badge">4 周 · 每周 3 练</view>
        </view>

        <view class="age-week-list">
            <view wx:for="{{weekPlans}}" wx:key="week" class="age-week-card">
                <view class="age-week-card__head">
                    <text class="age-week-card__week">第 {{item.week}} 周</text>
                    <text class="age-week-card__theme">{{item.theme}}</text>
                </view>
                <view class="age-week-card__body">
                    <view
                        wx:for="{{item.exercises}}"
                        wx:for-item="ex"
                        wx:key="title"
                        class="age-week-row">
                        <text class="age-week-row__title">{{ex.title}}</text>
                        <view
                            class="age-week-row__btn"
                            data-title="{{ex.title}}"
                            catchtap="onPracticeTap">
                            <text>去练习</text>
                            <text
                                class="age-week-row__btn-arrow"
                                aria-hidden="true"
                                >→</text
                            >
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="age-rec">
            <view class="age-rec__head">
                <text class="age-rec__title">为你推荐</text>
                <text class="age-rec__more" bindtap="onRecommendMore"
                    >更多</text
                >
            </view>
            <view class="age-rec__grid">
                <view
                    wx:for="{{recommendedItems}}"
                    wx:key="title"
                    class="age-rec__card"
                    data-title="{{item.title}}"
                    bindtap="onRecommendTap">
                    <image
                        class="age-rec__img"
                        src="{{item.image}}"
                        mode="aspectFill" />
                    <view class="age-rec__body">
                        <text class="age-rec__card-title">{{item.title}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>
