
<turbo-stream action="update" target="modal"><template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-50 backdrop-blur-sm"
     data-controller="modal"
     data-modal-auto-show-value="true"
     data-modal-close-on-backdrop-value="true"
     data-modal-target="backdrop">
  <div class="relative w-full max-w-md mx-4 sm:mx-auto bg-surface-secondary dark:bg-surface-dark-secondary shadow-md rounded-lg border border-gray-300 dark:border-gray-700 p-4 sm:p-6 max-h-[90vh] overflow-y-auto">
    <button class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center text-foreground-muted dark:text-foreground-dark-muted hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            data-action="click->modal#close">
      <span class="sr-only">閉じる</span>
      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
      </svg>
    </button>
    
    <!-- ロゴ -->
<div class="text-center mb-4">
  <h1 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">ログイン</h1>
</div>



  <!-- OAuthログインボタン -->
    <div class="mb-6 space-y-4">
        <form class="button_to" method="post" action="/auth/google"><button class="w-full flex items-center justify-center p-2 bg-red-600 text-white rounded-lg hover:bg-red-700" data-turbo="false" type="submit">
          <svg class="w-5 h-5 text-white mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
            <path fill-rule="evenodd" d="M12.037 21.998a10.313 10.313 0 0 1-7.168-3.049 9.888 9.888 0 0 1-2.868-7.118 9.947 9.947 0 0 1 3.064-6.949A10.37 10.37 0 0 1 12.212 2h.176a9.935 9.935 0 0 1 6.614 2.564L16.457 6.88a6.187 6.187 0 0 0-4.131-1.566 6.9 6.9 0 0 0-4.794 1.913 6.618 6.618 0 0 0-2.045 4.657 6.608 6.608 0 0 0 1.882 4.723 6.891 6.891 0 0 0 4.725 2.07h.143c1.41.072 2.8-.354 3.917-1.2a5.77 5.77 0 0 0 2.172-3.41l.043-.117H12.22v-3.41h9.678c.075.617.109 1.238.1 1.859-.099 5.741-4.017 9.6-9.746 9.6l-.215-.002Z" clip-rule="evenodd" />
          </svg>
          Googleでログイン
</button><input type="hidden" name="authenticity_token" value="1_uFvFjNOoQCEaHx1Rtm1jjC_tZPc7_crXCRgztTs4LYFGDN5_57DfbjEVZk0E1VrbQRECEKr3EabULp4juk1g" autocomplete="off" /></form>    </div>

    <!-- 区切り線 -->
    <div class="flex items-center my-4">
      <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
      <span class="mx-3 text-foreground-muted dark:text-foreground-dark-muted">または</span>
      <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
    </div>

  <!-- メールログインフォーム -->
  <form action="/login" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="uFG8kdyn4nJhgzRmLJPx8bMqcPsVPJbOqukx-HJ1sE22_V17WCcVPqyeFpXfzFgvnc6lqPq7Q4lQzH2YLgsKDg" autocomplete="off" />
    <div class="mb-4">
      <label class="block text-gray-700 dark:text-gray-300 mb-1" for="login_form_email">メールアドレス</label>
      <input class="w-full p-3 border rounded-lg bg-surface-elevated dark:bg-surface-dark-elevated dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="required" placeholder="example@example.com" type="email" name="login_form[email]" id="login_form_email" />
    </div>
    <div class="mb-4">
      <label class="block text-gray-700 dark:text-gray-300 mb-1" for="login_form_password">パスワード</label>
      <input class="w-full p-3 border rounded-lg bg-surface-elevated dark:bg-surface-dark-elevated dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required="required" placeholder="••••••••" type="password" name="login_form[password]" id="login_form_password" />
    </div>

    <!-- リメンバーミーチェックボックス & パスワード忘れリンク -->
    <div class="flex items-center justify-between mb-6">
      <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
        <input name="login_form[remember_me]" type="hidden" value="0" autocomplete="off" /><input class="form-checkbox h-4 w-4 text-blue-600 dark:text-blue-400" type="checkbox" value="1" name="login_form[remember_me]" id="login_form_remember_me" />
        <span class="ml-2">次回から自動でログインする</span>
      </label>
      <a class="text-sm text-blue-600 dark:text-blue-400 hover:underline" data-turbo-stream="true" href="/password_resets/new">パスワードを忘れましたか？</a>
    </div>

    <input type="submit" name="commit" value="ログイン" class="w-full p-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700" data-disable-with="ログイン" />
</form>
<!-- アカウント作成リンク -->
<div class="mt-6 text-center">
  <p class="text-foreground-muted dark:text-foreground-dark-muted">アカウントをお持ちではないですか？
    <a class="text-blue-600 dark:text-blue-400" data-turbo-stream="true" href="/signup">新規登録</a>
  </p>
</div>


  </div>
</div>
</template></turbo-stream>


