Hugging Face's logo

Spaces:
yukiputi
/
ending-note
Sleeping

App Files Community
ending-note / templates /section.html
yukiputi's picture
yukiputi
Upload 12 files
f0c38e6 verified
raw
history blame contribute delete
43.1 kB
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{ section_info.label }} — エンディングノート</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600&family=Zen+Old+Mincho:wght@400;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
 <!-- ヘッダー -->
 <header class="site-header">
 <div class="header-inner">
 <div class="header-brand">
 <a href="{{ url_for('dashboard') }}" class="header-back">‹ 一覧へ戻る</a>
 </div>
 <div class="header-title-center">{{ section_info.icon }} {{ section_info.label }}</div>
 <div class="header-save-status" id="save-status">—</div>
 </div>
 </header>
<!-- サイドバー（セクションナビ） -->
 <div class="layout-wrapper">
 <aside class="sidebar">
 <nav class="sidebar-nav">
 <a href="/section/basic" class="nav-link {{ 'active' if section_id == 'basic' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
 <circle cx="12" cy="7" r="4"/>
 </svg>
 基本情報
 </a>
<a href="/section/family" class="nav-link {{ 'active' if section_id == 'family' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
 <circle cx="9" cy="7" r="4"/>
 <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
 <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
 </svg>
 家族構成・緊急連絡先
 </a>
<a href="/section/assets" class="nav-link {{ 'active' if section_id == 'assets' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <rect x="2" y="7" width="20" height="14" rx="2"/>
 <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
 <path d="M2 11h20"/>
 </svg>
 財産・負債
 </a>
<a href="/section/digital" class="nav-link {{ 'active' if section_id == 'digital' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <rect x="2" y="3" width="20" height="14" rx="2"/>
 <path d="M8 21h8"/>
 <path d="M12 17v4"/>
 </svg>
 デジタル遺産
 </a>
<a href="/section/medical" class="nav-link {{ 'active' if section_id == 'medical' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
 </svg>
 医療・介護の希望
 </a>
<a href="/section/funeral" class="nav-link {{ 'active' if section_id == 'funeral' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <circle cx="12" cy="12" r="3"/>
 <path d="M12 2a4 4 0 0 1 4 4 4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1-4-4 4 4 0 0 1 4-4 4 4 0 0 1 4-4z"/>
 </svg>
 葬儀・供養の意向
 </a>
<a href="/section/will" class="nav-link {{ 'active' if section_id == 'will' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
 <polyline points="14 2 14 8 20 8"/>
 <line x1="16" y1="13" x2="8" y2="13"/>
 <line x1="16" y1="17" x2="8" y2="17"/>
 </svg>
 遺言書・法的情報
 </a>
<a href="/section/will_template" class="nav-link {{ 'active' if section_id == 'will_template' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <path d="M12 20h9"/>
 <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
 </svg>
 遺言状テンプレート
 </a>
<a href="/section/life_story" class="nav-link {{ 'active' if section_id == 'life_story' }}">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
 <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
 </svg>
 自分史・メッセージ
 </a>
 </nav>
 </aside>
<!-- メインコンテンツ -->
 <main class="section-main" id="section-main">
<!-- ===================== Section 1: 基本情報 ===================== -->
 {% if section_id == 'basic' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">👤 基本情報</h2>
 <div class="note-box">
 ここに記録した情報はローカルに保存されます。マイナンバーや暗証番号は<strong>絶対に直接書かず</strong>、保管場所のみ記入してください。
 </div>
 <div class="form-grid">
 <div class="form-group">
 <label>氏名（漢字）</label>
 <input type="text" data-key="name_kanji" class="form-input autosave" value="{{ section_data.get('name_kanji','') }}" placeholder="例：山田 太郎">
 </div>
 <div class="form-group">
 <label>氏名（ふりがな）</label>
 <input type="text" data-key="name_kana" class="form-input autosave" value="{{ section_data.get('name_kana','') }}" placeholder="例：やまだ たろう">
 </div>
 <div class="form-group">
 <label>生年月日</label>
 <input type="date" data-key="birthdate" class="form-input autosave" value="{{ section_data.get('birthdate','') }}">
 </div>
 <div class="form-group">
 <label>出生地</label>
 <input type="text" data-key="birthplace" class="form-input autosave" value="{{ section_data.get('birthplace','') }}" placeholder="例：東京都新宿区">
 </div>
 <div class="form-group form-full">
 <label>本籍地 <span class="label-note">※相続手続きで重要。住民票の附票等で確認できます。</span></label>
 <input type="text" data-key="honseki" class="form-input autosave" value="{{ section_data.get('honseki','') }}" placeholder="例：東京都渋谷区○○町1-2-3">
 </div>
 <div class="form-group form-full">
 <label>現住所</label>
 <input type="text" data-key="address" class="form-input autosave" value="{{ section_data.get('address','') }}" placeholder="例：香川県高松市○○町1-2-3">
 </div>
 <div class="form-group">
 <label>血液型</label>
 <select data-key="blood_type" class="form-select autosave">
 <option value="">選択してください</option>
 {% for bt in ['A型','B型','O型','AB型','不明'] %}
 <option value="{{ bt }}" {% if section_data.get('blood_type') == bt %}selected{% endif %}>{{ bt }}</option>
 {% endfor %}
 </select>
 </div>
 <div class="form-group form-full">
 <label>個人番号（マイナンバー）の<strong>保管場所</strong></label>
 <div class="caution-box">⚠️ マイナンバーそのものは記入しないでください。保管場所（例：自宅金庫の中）のみ記入してください。</div>
 <input type="text" data-key="my_number_location" class="form-input autosave" value="{{ section_data.get('my_number_location','') }}" placeholder="例：自宅金庫の中の封筒">
 </div>
 </div>
 </div>
<!-- ===================== Section 2: 家族構成 ===================== -->
 {% elif section_id == 'family' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">👨‍👩‍👧 家族構成・緊急連絡先</h2>
 <div class="note-box">スマートフォン内にしか連絡先がない場合に備え、ここに記録しておくことを推奨します。</div>
<div class="dynamic-section">
 <h3 class="dynamic-title">家族情報</h3>
 <div class="dynamic-list" id="list-members" data-key="members">
 {% for item in section_data.get('members', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="続柄" data-field="relation" value="{{ item.get('relation','') }}">
 <input type="text" class="form-input" placeholder="氏名" data-field="name" value="{{ item.get('name','') }}">
 <input type="date" class="form-input" placeholder="生年月日" data-field="birthdate" value="{{ item.get('birthdate','') }}">
 <input type="text" class="form-input" placeholder="連絡先（電話番号等）" data-field="contact" value="{{ item.get('contact','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-members', ['relation:続柄','name:氏名','birthdate:生年月日','contact:連絡先'])">＋ 家族を追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">緊急連絡先</h3>
 <div class="dynamic-list" id="list-emergency" data-key="emergency">
 {% for item in section_data.get('emergency', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="氏名" data-field="name" value="{{ item.get('name','') }}">
 <input type="text" class="form-input" placeholder="関係" data-field="relation" value="{{ item.get('relation','') }}">
 <input type="text" class="form-input" placeholder="電話番号" data-field="phone" value="{{ item.get('phone','') }}">
 <input type="text" class="form-input" placeholder="備考" data-field="note" value="{{ item.get('note','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-emergency', ['name:氏名','relation:関係','phone:電話番号','note:備考'])">＋ 緊急連絡先を追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">友人・知人連絡先</h3>
 <div class="dynamic-list" id="list-friends" data-key="friends">
 {% for item in section_data.get('friends', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="氏名" data-field="name" value="{{ item.get('name','') }}">
 <input type="text" class="form-input" placeholder="関係" data-field="relation" value="{{ item.get('relation','') }}">
 <input type="text" class="form-input" placeholder="電話番号" data-field="phone" value="{{ item.get('phone','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-friends', ['name:氏名','relation:関係','phone:電話番号'])">＋ 友人・知人を追加</button>
 </div>
 </div>
<!-- ===================== Section 3: 財産・負債 ===================== -->
 {% elif section_id == 'assets' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">💴 財産・負債</h2>
<div class="dynamic-section">
 <h3 class="dynamic-title">預貯金</h3>
 <div class="dynamic-list" id="list-deposits" data-key="deposits">
 {% for item in section_data.get('deposits', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="金融機関名" data-field="bank" value="{{ item.get('bank','') }}">
 <input type="text" class="form-input" placeholder="支店名" data-field="branch" value="{{ item.get('branch','') }}">
 <input type="text" class="form-input" placeholder="種別（普通/定期等）" data-field="type" value="{{ item.get('type','') }}">
 <input type="text" class="form-input" placeholder="備考" data-field="note" value="{{ item.get('note','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-deposits', ['bank:金融機関名','branch:支店名','type:種別','note:備考'])">＋ 口座を追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">株式・投資信託</h3>
 <div class="dynamic-list" id="list-stocks" data-key="stocks">
 {% for item in section_data.get('stocks', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="証券会社名" data-field="company" value="{{ item.get('company','') }}">
 <input type="text" class="form-input" placeholder="備考" data-field="note" value="{{ item.get('note','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-stocks', ['company:証券会社名','note:備考'])">＋ 証券口座を追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">不動産</h3>
 <div class="dynamic-list" id="list-real_estate" data-key="real_estate">
 {% for item in section_data.get('real_estate', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="所在地" data-field="location" value="{{ item.get('location','') }}">
 <input type="text" class="form-input" placeholder="名義人" data-field="owner" value="{{ item.get('owner','') }}">
 <input type="text" class="form-input" placeholder="持分" data-field="share" value="{{ item.get('share','') }}">
 <input type="text" class="form-input" placeholder="管理会社" data-field="manager" value="{{ item.get('manager','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-real_estate', ['location:所在地','owner:名義人','share:持分','manager:管理会社'])">＋ 不動産を追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">生命保険</h3>
 <div class="dynamic-list" id="list-insurance" data-key="insurance">
 {% for item in section_data.get('insurance', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="保険会社" data-field="company" value="{{ item.get('company','') }}">
 <input type="text" class="form-input" placeholder="種別" data-field="type" value="{{ item.get('type','') }}">
 <input type="text" class="form-input" placeholder="受取人" data-field="beneficiary" value="{{ item.get('beneficiary','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-insurance', ['company:保険会社','type:種別','beneficiary:受取人'])">＋ 保険を追加</button>
 </div>
<div class="form-grid">
 <div class="form-group">
 <label>年金種別</label>
 <input type="text" data-key="pension_type" class="form-input autosave" value="{{ section_data.get('pension_type','') }}" placeholder="例：厚生年金">
 </div>
 <div class="form-group">
 <label>年金振込口座</label>
 <input type="text" data-key="pension_account" class="form-input autosave" value="{{ section_data.get('pension_account','') }}" placeholder="例：○○銀行 普通">
 </div>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">負債・ローン</h3>
 <div class="note-box">⚠️ マイナスの財産も正確に記録することで、相続トラブルを防ぐことができます。</div>
 <div class="dynamic-list" id="list-debts" data-key="debts">
 {% for item in section_data.get('debts', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="種別（住宅ローン等）" data-field="type" value="{{ item.get('type','') }}">
 <input type="text" class="form-input" placeholder="借入先" data-field="creditor" value="{{ item.get('creditor','') }}">
 <input type="text" class="form-input" placeholder="残高目安" data-field="balance" value="{{ item.get('balance','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-debts', ['type:種別','creditor:借入先','balance:残高目安'])">＋ 負債を追加</button>
 </div>
<div class="form-group form-full">
 <label>口座番号・暗証番号の<strong>保管場所</strong></label>
 <div class="caution-box">⚠️ 口座番号・暗証番号は絶対に直接書かず、記録した紙や媒体の保管場所のみ記入してください。</div>
 <input type="text" data-key="account_location" class="form-input autosave" value="{{ section_data.get('account_location','') }}" placeholder="例：自宅の鍵付き引き出し">
 </div>
 </div>
<!-- ===================== Section 4: デジタル遺産 ===================== -->
 {% elif section_id == 'digital' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">💻 デジタル遺産</h2>
 <div class="caution-box caution-red">⚠️ パスワードは絶対にここに直接書かないでください。パスワードを記録した紙や媒体の<strong>保管場所のみ</strong>記入してください。</div>
<div class="form-group form-full">
 <label>スマートフォン・PCのロック解除情報の保管場所</label>
 <input type="text" data-key="device_lock_location" class="form-input autosave" value="{{ section_data.get('device_lock_location','') }}" placeholder="例：自宅金庫の中の茶封筒">
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">主要アカウント</h3>
 <div class="dynamic-list" id="list-accounts" data-key="accounts">
 {% for item in section_data.get('accounts', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="サービス名（例：Gmail）" data-field="service" value="{{ item.get('service','') }}">
 <input type="text" class="form-input" placeholder="IDの保管場所" data-field="id_location" value="{{ item.get('id_location','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-accounts', ['service:サービス名','id_location:IDの保管場所'])">＋ アカウントを追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">サブスクリプション一覧</h3>
 <div class="dynamic-list" id="list-subscriptions" data-key="subscriptions">
 {% for item in section_data.get('subscriptions', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="サービス名" data-field="service" value="{{ item.get('service','') }}">
 <input type="text" class="form-input" placeholder="引き落とし口座" data-field="account" value="{{ item.get('account','') }}">
 <input type="text" class="form-input" placeholder="解約方法メモ" data-field="cancel_note" value="{{ item.get('cancel_note','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-subscriptions', ['service:サービス名','account:引き落とし口座','cancel_note:解約方法'])">＋ サブスクを追加</button>
 </div>
 </div>
<!-- ===================== Section 5: 医療・介護 ===================== -->
 {% elif section_id == 'medical' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">🏥 医療・介護の希望</h2>
 <div class="form-grid">
 <div class="form-group form-full">
 <label>持病・既往歴</label>
 <textarea data-key="chronic_diseases" class="form-textarea autosave" rows="3" placeholder="記録がない場合は「なし」と記入">{{ section_data.get('chronic_diseases','') }}</textarea>
 </div>
 <div class="form-group">
 <label>アレルギー</label>
 <input type="text" data-key="allergies" class="form-input autosave" value="{{ section_data.get('allergies','') }}" placeholder="例：ペニシリン、卵">
 </div>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">現在の服用薬</h3>
 <div class="dynamic-list" id="list-medications" data-key="medications">
 {% for item in section_data.get('medications', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="薬名" data-field="name" value="{{ item.get('name','') }}">
 <input type="text" class="form-input" placeholder="用量" data-field="dose" value="{{ item.get('dose','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-medications', ['name:薬名','dose:用量'])">＋ 薬を追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">かかりつけ医</h3>
 <div class="dynamic-list" id="list-doctors" data-key="doctors">
 {% for item in section_data.get('doctors', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="医院名" data-field="name" value="{{ item.get('name','') }}">
 <input type="text" class="form-input" placeholder="診療科" data-field="department" value="{{ item.get('department','') }}">
 <input type="text" class="form-input" placeholder="連絡先" data-field="phone" value="{{ item.get('phone','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-doctors', ['name:医院名','department:診療科','phone:連絡先'])">＋ かかりつけ医を追加</button>
 </div>
<div class="form-grid">
 <div class="form-group form-full">
 <label>介護が必要になった場合の希望</label>
 <div class="radio-group">
 {% for v, l in [('home','在宅を希望'), ('facility','施設を希望'), ('family','家族に委ねる')] %}
 <label class="radio-label">
 <input type="radio" name="care_preference" data-key="care_preference" value="{{ v }}" class="autosave-radio"
 {% if section_data.get('care_preference') == v %}checked{% endif %}> {{ l }}
 </label>
 {% endfor %}
 </div>
 <input type="text" data-key="care_preference_note" class="form-input autosave mt-1" value="{{ section_data.get('care_preference_note','') }}" placeholder="補足・詳細">
 </div>
 <div class="form-group">
 <label>介護判断を任せたい人</label>
 <input type="text" data-key="care_person" class="form-input autosave" value="{{ section_data.get('care_person','') }}">
 </div>
 <div class="form-group">
 <label>介護費用の充当先</label>
 <input type="text" data-key="care_funds" class="form-input autosave" value="{{ section_data.get('care_funds','') }}" placeholder="例：預貯金・保険">
 </div>
 <div class="form-group form-full">
 <label>延命治療の希望</label>
 <div class="radio-group">
 {% for v, l in [('yes','希望する'), ('no','希望しない'), ('family','家族に委ねる')] %}
 <label class="radio-label">
 <input type="radio" name="life_sustaining" data-key="life_sustaining" value="{{ v }}" class="autosave-radio"
 {% if section_data.get('life_sustaining') == v %}checked{% endif %}> {{ l }}
 </label>
 {% endfor %}
 </div>
 </div>
 <div class="form-group form-full">
 <label>病名告知の希望</label>
 <div class="radio-group">
 {% for v, l in [('yes','知らせてほしい'), ('no','知らせなくてよい'), ('family','家族に委ねる')] %}
 <label class="radio-label">
 <input type="radio" name="diagnosis_disclosure" data-key="diagnosis_disclosure" value="{{ v }}" class="autosave-radio"
 {% if section_data.get('diagnosis_disclosure') == v %}checked{% endif %}> {{ l }}
 </label>
 {% endfor %}
 </div>
 </div>
 <div class="form-group form-full">
 <label>臓器提供意思</label>
 <div class="radio-group">
 {% for v, l in [('yes','提供する'), ('no','提供しない'), ('family','家族に委ねる')] %}
 <label class="radio-label">
 <input type="radio" name="organ_donation" data-key="organ_donation" value="{{ v }}" class="autosave-radio"
 {% if section_data.get('organ_donation') == v %}checked{% endif %}> {{ l }}
 </label>
 {% endfor %}
 </div>
 <input type="text" data-key="organ_donation_note" class="form-input autosave mt-1" value="{{ section_data.get('organ_donation_note','') }}" placeholder="備考・条件など">
 </div>
 <div class="form-group form-full">
 <label>
 <input type="checkbox" data-key="living_will" class="autosave-check" {% if section_data.get('living_will') %}checked{% endif %}>
 事前指示書（リビングウィル）がある
 </label>
 <input type="text" data-key="living_will_location" class="form-input autosave mt-1" value="{{ section_data.get('living_will_location','') }}" placeholder="保管場所">
 </div>
 </div>
 </div>
<!-- ===================== Section 6: 葬儀 ===================== -->
 {% elif section_id == 'funeral' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">🌸 葬儀・供養の意向</h2>
 <div class="form-grid">
 <div class="form-group">
 <label>希望する葬儀の形式</label>
 <select data-key="style" class="form-select autosave">
 <option value="">選択してください</option>
 {% for s in ['一般葬','家族葬','一日葬','直葬','その他'] %}
 <option value="{{ s }}" {% if section_data.get('style') == s %}selected{% endif %}>{{ s }}</option>
 {% endfor %}
 </select>
 </div>
 <div class="form-group">
 <label>想定予算</label>
 <input type="text" data-key="budget" class="form-input autosave" value="{{ section_data.get('budget','') }}" placeholder="例：100万円程度">
 </div>
 <div class="form-group form-full">
 <label>
 <input type="checkbox" data-key="prepaid" class="autosave-check" {% if section_data.get('prepaid') %}checked{% endif %}>
 生前予約・互助会の契約がある
 </label>
 <input type="text" data-key="prepaid_detail" class="form-input autosave mt-1" value="{{ section_data.get('prepaid_detail','') }}" placeholder="会社名・会員番号・担当者等">
 </div>
 <div class="form-group form-full">
 <label>棺に入れてほしいもの</label>
 <textarea data-key="coffin_items" class="form-textarea autosave" rows="3" placeholder="例：愛読書、庭の花">{{ section_data.get('coffin_items','') }}</textarea>
 </div>
 <div class="form-group">
 <label>遺影写真の場所・指定</label>
 <input type="text" data-key="photo_location" class="form-input autosave" value="{{ section_data.get('photo_location','') }}" placeholder="例：デスクトップの〇〇フォルダ">
 </div>
 <div class="form-group">
 <label>宗教・宗派</label>
 <input type="text" data-key="religion" class="form-input autosave" value="{{ section_data.get('religion','') }}" placeholder="例：仏教・浄土宗">
 </div>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">参列してほしい人</h3>
 <div class="dynamic-list" id="list-attendees" data-key="attendees">
 {% for item in section_data.get('attendees', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="氏名" data-field="name" value="{{ item.get('name','') }}">
 <input type="text" class="form-input" placeholder="関係" data-field="relation" value="{{ item.get('relation','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-attendees', ['name:氏名','relation:関係'])">＋ 参列希望者を追加</button>
 </div>
<div class="form-grid">
 <div class="form-group form-full">
 <label>お墓・納骨の希望</label>
 <select data-key="grave_type" class="form-select autosave">
 <option value="">選択してください</option>
 {% for g in ['既存のお墓','お墓を新たに購入','散骨','樹木葬','その他'] %}
 <option value="{{ g }}" {% if section_data.get('grave_type') == g %}selected{% endif %}>{{ g }}</option>
 {% endfor %}
 </select>
 <input type="text" data-key="grave_note" class="form-input autosave mt-1" value="{{ section_data.get('grave_note','') }}" placeholder="詳細・希望場所等">
 </div>
 </div>
 </div>
<!-- ===================== Section 7: 遺言書 ===================== -->
 {% elif section_id == 'will' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">📜 遺言書・法的情報</h2>
 <div class="note-box">⚠️ 遺言書が発見されないと相続手続きが複雑化します。必ず家族に知らせておきましょう。</div>
 <div class="form-grid">
 <div class="form-group form-full">
 <label>遺言書の有無</label>
 <div class="radio-group">
 {% for v, l in [('yes','あり'), ('no','なし'), ('planned','作成予定')] %}
 <label class="radio-label">
 <input type="radio" name="existence" data-key="existence" value="{{ v }}" class="autosave-radio"
 {% if section_data.get('existence') == v %}checked{% endif %}> {{ l }}
 </label>
 {% endfor %}
 </div>
 </div>
 <div class="form-group">
 <label>遺言書の形式</label>
 <select data-key="format" class="form-select autosave">
 <option value="">選択してください</option>
 {% for f in ['自筆証書遺言','公正証書遺言','秘密証書遺言'] %}
 <option value="{{ f }}" {% if section_data.get('format') == f %}selected{% endif %}>{{ f }}</option>
 {% endfor %}
 </select>
 </div>
 <div class="form-group form-full">
 <label>保管場所または依頼専門家の連絡先</label>
 <input type="text" data-key="location_or_contact" class="form-input autosave" value="{{ section_data.get('location_or_contact','') }}" placeholder="例：自宅金庫 / ○○法律事務所 Tel: 000-000-0000">
 </div>
 <div class="form-group form-full">
 <label>相続に関する特記事項</label>
 <textarea data-key="notes" class="form-textarea autosave" rows="4">{{ section_data.get('notes','') }}</textarea>
 </div>
 </div>
 </div>
<!-- ===================== Section 8: 遺言状テンプレート ===================== -->
 {% elif section_id == 'will_template' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">✍️ 遺言状テンプレート（参考用）</h2>
 <div class="caution-box caution-red">
 ⚠️ このテンプレートはあくまで参考用です。自筆証書遺言は法的要件（<strong>全文自署・日付・押印</strong>）を満たす必要があります。正式な遺言書の作成は行政書士・司法書士・公証役場にご相談ください。
 </div>
 <div class="form-grid">
 <div class="form-group">
 <label>遺言者氏名</label>
 <input type="text" data-key="testator_name" class="form-input autosave" value="{{ section_data.get('testator_name','') }}">
 </div>
 <div class="form-group">
 <label>生年月日</label>
 <input type="date" data-key="testator_birthdate" class="form-input autosave" value="{{ section_data.get('testator_birthdate','') }}">
 </div>
 <div class="form-group form-full">
 <label>住所</label>
 <input type="text" data-key="testator_address" class="form-input autosave" value="{{ section_data.get('testator_address','') }}">
 </div>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">財産の分割指定</h3>
 <div class="dynamic-list" id="list-items" data-key="items">
 {% for item in section_data.get('items', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="財産の種類" data-field="asset" value="{{ item.get('asset','') }}">
 <input type="text" class="form-input" placeholder="相手（氏名）" data-field="person" value="{{ item.get('person','') }}">
 <input type="text" class="form-input" placeholder="割合・詳細" data-field="ratio" value="{{ item.get('ratio','') }}">
 <input type="text" class="form-input" placeholder="備考" data-field="note" value="{{ item.get('note','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-items', ['asset:財産の種類','person:相手(氏名)','ratio:割合','note:備考'])">＋ 財産分割を追加</button>
 </div>
<div class="form-grid">
 <div class="form-group form-full">
 <label>付言事項（家族へのメッセージ）</label>
 <textarea data-key="message" class="form-textarea autosave" rows="5">{{ section_data.get('message','') }}</textarea>
 </div>
 <div class="form-group">
 <label>作成日</label>
 <input type="date" data-key="date" class="form-input autosave" value="{{ section_data.get('date','') }}">
 </div>
 </div>
<div class="will-preview-btn-wrap">
 <a href="{{ url_for('will_preview') }}" target="_blank" class="btn-primary">📄 遺言状プレビューを表示</a>
 </div>
 </div>
<!-- ===================== Section 9: 自分史 ===================== -->
 {% elif section_id == 'life_story' %}
 <div class="section-form-wrap">
 <h2 class="form-section-title">📖 自分史・メッセージ</h2>
 <div class="form-grid">
 <div class="form-group form-full">
 <label>生い立ち・印象的な思い出</label>
 <textarea data-key="childhood" class="form-textarea autosave" rows="5">{{ section_data.get('childhood','') }}</textarea>
 </div>
 <div class="form-group form-full">
 <label>仕事・社会での歩み</label>
 <textarea data-key="career" class="form-textarea autosave" rows="5">{{ section_data.get('career','') }}</textarea>
 </div>
 <div class="form-group form-full">
 <label>趣味・好きなもの</label>
 <textarea data-key="hobbies" class="form-textarea autosave" rows="3">{{ section_data.get('hobbies','') }}</textarea>
 </div>
 <div class="form-group form-full">
 <label>家族へのメッセージ</label>
 <textarea data-key="family_message" class="form-textarea autosave" rows="5">{{ section_data.get('family_message','') }}</textarea>
 </div>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">特定の人への個別メッセージ</h3>
 <div class="dynamic-list" id="list-messages" data-key="messages">
 {% for item in section_data.get('messages', []) %}
 <div class="dynamic-item dynamic-item-col">
 <input type="text" class="form-input" placeholder="宛先（氏名）" data-field="to" value="{{ item.get('to','') }}">
 <textarea class="form-textarea" placeholder="メッセージ本文" data-field="body" rows="3">{{ item.get('body','') }}</textarea>
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItemWithTextarea('list-messages')">＋ 個別メッセージを追加</button>
 </div>
<div class="dynamic-section">
 <h3 class="dynamic-title">ペットの引き継ぎ先</h3>
 <div class="dynamic-list" id="list-pets" data-key="pets">
 {% for item in section_data.get('pets', []) %}
 <div class="dynamic-item">
 <input type="text" class="form-input" placeholder="ペット名" data-field="name" value="{{ item.get('name','') }}">
 <input type="text" class="form-input" placeholder="種別（猫・犬等）" data-field="species" value="{{ item.get('species','') }}">
 <input type="text" class="form-input" placeholder="引き継ぎ希望先" data-field="successor" value="{{ item.get('successor','') }}">
 <input type="text" class="form-input" placeholder="かかりつけ獣医" data-field="vet" value="{{ item.get('vet','') }}">
 <button type="button" class="btn-delete-item" onclick="removeItem(this)">✕</button>
 </div>
 {% endfor %}
 </div>
 <button type="button" class="btn-add-item" onclick="addItem('list-pets', ['name:ペット名','species:種別','successor:引き継ぎ希望先','vet:かかりつけ獣医'])">＋ ペットを追加</button>
 </div>
 </div>
 {% endif %}
<!-- 前後ナビゲーション -->
 <div class="section-nav-btns">
 {% if prev_section %}
 <a href="{{ url_for('section_view', section_id=prev_section.id) }}" class="btn-outline">‹ {{ prev_section.label }}</a>
 {% else %}
 <div></div>
 {% endif %}
 <a href="{{ url_for('dashboard') }}" class="btn-ghost">一覧へ</a>
 {% if next_section %}
 <a href="{{ url_for('section_view', section_id=next_section.id) }}" class="btn-primary">{{ next_section.label }} ›</a>
 {% else %}
 <div></div>
 {% endif %}
 </div>
</main>
 </div>
<!-- 自動保存用の隠しデータ -->
 <script>
 // Jinja2から渡されたセクションデータをJSで使えるようにする
 const SECTION_ID = "{{ section_id }}";
 const SECTION_DATA = {{ section_data_json | safe }};
 </script>
 <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>