{{template "base" .}}

{{define "content"}}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <h1 class="mb-4"><i class="bi bi-person me-2"></i>プロフィール</h1>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">アカウント情報</h5>
                    </div>
                    <div class="card-body">
                        {{if .error}}<div class="alert alert-danger">{{.error}}</div>{{end}}
                        {{if .success}}<div class="alert alert-success">{{.success}}</div>{{end}}
                        <form method="POST" action="/profile">
                            {{.csrfField}}
                            <div class="mb-3">
                                <label for="email" class="form-label">メールアドレス</label>
                                <input type="email" class="form-control" id="email" value="{{.user.Email}}" disabled>
                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">名前</label>
                                <input type="text" class="form-control" id="name" name="name" value="{{.user.Name}}"
                                    required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">ロール</label>
                                <input type="text" class="form-control"
                                    value="{{if eq .user.Role `admin`}}管理者{{else}}ユーザー{{end}}" disabled>
                            </div>
                            <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>更新</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">パスワード変更</h5>
                    </div>
                    <div class="card-body">
                        {{if .passwordError}}<div class="alert alert-danger">{{.passwordError}}</div>{{end}}
                        {{if .passwordSuccess}}<div class="alert alert-success">{{.passwordSuccess}}</div>{{end}}
                        <form method="POST" action="/profile/password">
                            {{.csrfField}}
                            <div class="mb-3">
                                <label for="old_password" class="form-label">現在のパスワード</label>
                                <input type="password" class="form-control" id="old_password" name="old_password"
                                    required>
                            </div>
                            <div class="mb-3">
                                <label for="new_password" class="form-label">新しいパスワード</label>
                                <input type="password" class="form-control" id="new_password" name="new_password"
                                    required minlength="6">
                                <div class="form-text">6文字以上</div>
                            </div>
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">新しいパスワード（確認）</label>
                                <input type="password" class="form-control" id="confirm_password"
                                    name="confirm_password" required>
                            </div>
                            <button type="submit" class="btn btn-warning"><i class="bi bi-key me-1"></i>パスワード変更</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 通知設定 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-bell me-2"></i>通知設定</h5>
            </div>
            <div class="card-body">
                {{if .notifyError}}<div class="alert alert-danger">{{.notifyError}}</div>{{end}}
                {{if .notifySuccess}}<div class="alert alert-success">{{.notifySuccess}}</div>{{end}}
                <form method="POST" action="/profile/notifications">
                    {{.csrfField}}
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="mb-3"><i class="bi bi-telegram me-1"></i>Telegram</h6>
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="telegram_enabled"
                                    name="telegram_enabled" {{if .notifySettings.TelegramEnabled}}checked{{end}}>
                                <label class="form-check-label" for="telegram_enabled">Telegram通知を有効化</label>
                            </div>
                            <div class="mb-3">
                                <label for="telegram_chat_id" class="form-label">Chat ID</label>
                                <input type="text" class="form-control" id="telegram_chat_id" name="telegram_chat_id"
                                    value="{{.notifySettings.TelegramChatID}}" placeholder="例: 123456789">
                                <div class="form-text">
                                    Botに<code>/start</code>を送信後、<a href="https://t.me/userinfobot"
                                        target="_blank">@userinfobot</a>でIDを確認
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-3"><i class="bi bi-chat-dots me-1"></i>LINE Notify</h6>
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="line_enabled" name="line_enabled"
                                    {{if .notifySettings.LineEnabled}}checked{{end}}>
                                <label class="form-check-label" for="line_enabled">LINE通知を有効化</label>
                            </div>
                            <div class="mb-3">
                                <label for="line_token" class="form-label">アクセストークン</label>
                                <input type="password" class="form-control" id="line_token" name="line_token"
                                    value="{{.notifySettings.LineNotifyToken}}" placeholder="トークンを入力">
                                <div class="form-text">
                                    <a href="https://notify-bot.line.me/my/" target="_blank">LINE Notify</a>でトークンを発行
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="my-3">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="notify_on_create" name="notify_on_create"
                            {{if .notifySettings.NotifyOnCreate}}checked{{end}}>
                        <label class="form-check-label" for="notify_on_create">
                            <i class="bi bi-plus-circle me-1"></i>課題追加時に通知する
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>通知設定を保存</button>
                </form>
            </div>
        </div>
    </div>
</div>
{{end}}