<view class="container">
  <view class="hero">
    <view class="hero-title">轻食食谱信息管理</view>
    <view class="hero-sub">支持导入 / 查找 / 编辑 / 删除食谱信息</view>
  </view>

  <view class="card">
    <view class="card-title">食谱查找</view>
    <input class="input" data-field="keyword" value="{{keyword}}" bindinput="onInput" placeholder="按名称搜索" />
    <button class="btn btn-primary" loading="{{loading}}" bindtap="fetchRecipes">搜索食谱</button>
    <button class="btn btn-ghost" bindtap="importDefaultSeed">导入默认食谱种子</button>
  </view>

  <view class="card">
    <view class="card-title">{{editId ? ('编辑食谱 #' + editId) : '新增食谱'}}</view>
    <input class="input" data-field="name" value="{{form.name}}" bindinput="onFormInput" placeholder="食谱名称" />
    <input class="input" data-field="category" value="{{form.category}}" bindinput="onFormInput" placeholder="分类" />
    <input class="input" data-field="description" value="{{form.description}}" bindinput="onFormInput" placeholder="描述" />
    <input class="input" data-field="calories" type="digit" value="{{form.calories}}" bindinput="onFormInput" placeholder="热量" />
    <input class="input" data-field="protein" type="digit" value="{{form.protein}}" bindinput="onFormInput" placeholder="蛋白质" />
    <input class="input" data-field="fat" type="digit" value="{{form.fat}}" bindinput="onFormInput" placeholder="脂肪" />
    <input class="input" data-field="carbs" type="digit" value="{{form.carbs}}" bindinput="onFormInput" placeholder="碳水" />
    <input class="input" data-field="fiber" type="digit" value="{{form.fiber}}" bindinput="onFormInput" placeholder="膳食纤维" />
    <input class="input" data-field="tagsText" value="{{form.tagsText}}" bindinput="onFormInput" placeholder="标签，逗号分隔" />

    <button class="btn btn-primary" bindtap="saveRecipe">保存食谱</button>
    <button class="btn btn-ghost" bindtap="startCreate">清空表单</button>
  </view>

  <view class="card">
    <view class="card-title">批量导入 JSON</view>
    <textarea class="input textarea" data-field="importText" value="{{importText}}" bindinput="onInput" />
    <button class="btn btn-accent" bindtap="importByJSON">执行导入</button>
  </view>

  <view class="card">
    <view class="card-title">食谱列表</view>
    <view wx:if="{{!recipes.length}}" class="empty">暂无食谱</view>

    <view wx:for="{{recipes}}" wx:key="id" class="item">
      <view class="row">
        <view class="item-title">{{item.name}}</view>
        <view class="value">{{item.calories}} kcal</view>
      </view>
      <view class="item-sub">蛋白{{item.protein}}g / 脂肪{{item.fat}}g / 碳水{{item.carbs}}g</view>
      <view class="item-sub">{{item.category}} · {{item.tags_text}}</view>
      <view class="row">
        <button class="btn btn-ghost" size="mini" data-id="{{item.id}}" bindtap="startEdit">编辑</button>
        <button class="btn btn-accent" size="mini" data-id="{{item.id}}" bindtap="deleteRecipe">删除</button>
      </view>
    </view>
  </view>
</view>
