$t:mypage.profile.edit_title

$t:common.validation_error_title

{{message}}

$t:mypage.profile.section_basic

$t:mypage.profile.email

$t:mypage.profile.email_readonly_hint

$t:mypage.profile.name *

$t:mypage.profile.nickname

$t:mypage.profile.contact_info

$t:mypage.profile.mobile

$t:mypage.profile.phone

$t:mypage.profile.homepage

$t:mypage.profile.location_info

$t:mypage.profile.country

$t:mypage.profile.timezone

zipcode address

{{_local.profileErrors?.zipcode ? _local.profileErrors.zipcode[0] : (_local.profileErrors?.address ? _local.profileErrors.address[0] : (_local.profileErrors?.address_detail ? _local.profileErrors.address_detail[0] : ''))}}

$t:mypage.profile.section_signature_bio

$t:mypage.profile.signature

<p data-if="{{_local.profileErrors?.signature}}" class="text-sm text-red-600 dark:text-red-400">{{_local.profileErrors.signature[0]}}</p>
            <p class="text-xs text-slate-500 dark:text-slate-400">$t:mypage.profile.signature_hint</p>
          </div>
          <div class="space-y-1">
            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">$t:mypage.profile.bio</label>
            <textarea name="bio" :rows="5" value="{{user.data?.bio ?? ''}}" placeholder="$t:mypage.profile.bio_placeholder" class="{{_local.profileErrors?.bio ? 'w-full px-4 py-2.5 border border-red-500 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white resize-none' : 'w-full px-4 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white resize-none'}}"/>
            <p data-if="{{_local.profileErrors?.bio}}" class="text-sm text-red-600 dark:text-red-400">{{_local.profileErrors.bio[0]}}</p>
            <p class="text-xs text-slate-500 dark:text-slate-400">$t:mypage.profile.bio_hint</p>
          </div>
        </div>
      </div>
      <div data-if="{{user.data?.notify_comment !== undefined}}" class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <responsive on="portable" class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-4"/>
        <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-200 dark:border-slate-700">
          <responsive on="portable" class="flex items-center justify-between mb-3 pb-3 border-b border-slate-200 dark:border-slate-700"/>
          <div class="flex items-center gap-2">
            <icon name="bell" class="w-5 h-5 text-slate-600 dark:text-slate-400"/>
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">$t:mypage.notification_settings.title</h3>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <responsive on="portable" class="grid grid-cols-1 gap-3"/>
          <label class="flex items-start gap-3 cursor-pointer p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
            <checkbox name="notify_post_complete" class="w-5 h-5 mt-0.5 text-slate-900 dark:text-white bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 rounded focus:ring-slate-900 dark:focus:ring-white"/>
            <div>
              <span class="block text-sm font-medium text-slate-900 dark:text-white">$t:mypage.notification_settings.post_complete</span>
              <span class="block text-xs text-slate-500 dark:text-slate-400">$t:mypage.notification_settings.post_complete_desc</span>
            </div>
          </label>
          <label class="flex items-start gap-3 cursor-pointer p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
            <checkbox name="notify_post_reply" class="w-5 h-5 mt-0.5 text-slate-900 dark:text-white bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 rounded focus:ring-slate-900 dark:focus:ring-white"/>
            <div>
              <span class="block text-sm font-medium text-slate-900 dark:text-white">$t:mypage.notification_settings.post_reply</span>
              <span class="block text-xs text-slate-500 dark:text-slate-400">$t:mypage.notification_settings.post_reply_desc</span>
            </div>
          </label>
          <label class="flex items-start gap-3 cursor-pointer p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
            <checkbox name="notify_comment" class="w-5 h-5 mt-0.5 text-slate-900 dark:text-white bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 rounded focus:ring-slate-900 dark:focus:ring-white"/>
            <div>
              <span class="block text-sm font-medium text-slate-900 dark:text-white">$t:mypage.notification_settings.comment</span>
              <span class="block text-xs text-slate-500 dark:text-slate-400">$t:mypage.notification_settings.comment_desc</span>
            </div>
          </label>
          <label class="flex items-start gap-3 cursor-pointer p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
            <checkbox name="notify_reply_comment" class="w-5 h-5 mt-0.5 text-slate-900 dark:text-white bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 rounded focus:ring-slate-900 dark:focus:ring-white"/>
            <div>
              <span class="block text-sm font-medium text-slate-900 dark:text-white">$t:mypage.notification_settings.reply_comment</span>
              <span class="block text-xs text-slate-500 dark:text-slate-400">$t:mypage.notification_settings.reply_comment_desc</span>
            </div>
          </label>
        </div>
      </div>
      <div class="flex justify-end gap-2">
        <responsive on="portable" class="flex flex-col-reverse gap-2"/>
        <button type="button" class="inline-flex items-center justify-center gap-2 px-6 py-2.5 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
          <responsive on="portable" type="button" class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-lg text-base font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"/>
          <on type="click">
            <navigate path="/mypage/profile"/>
          </on>
          <icon name="x" size="md"/>
          <span>$t:common.cancel</span>
        </button>
        <button type="submit" disabled="{{_local.isSavingProfile}}" class="inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-teal-600 dark:bg-teal-500 text-white rounded-lg text-sm font-medium hover:bg-teal-700 dark:hover:bg-teal-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
          <responsive on="portable" type="submit" disabled="{{_local.isSavingProfile}}" class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-teal-600 dark:bg-teal-500 text-white rounded-lg text-base font-medium hover:bg-teal-700 dark:hover:bg-teal-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"/>
          <icon data-if="{{_local.isSavingProfile}}" name="spinner" size="md" class="animate-spin"/>
          <icon data-if="{{!_local.isSavingProfile}}" name="save" size="md"/>
          <span>$t:common.save</span>
        </button>
      </div>
    </form>
  </div>
</partial>