<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<script type="text/javascript">
  let multiModal;
  $(function () {
    multiModal = new bootstrap.Modal(document.getElementById('multiModal'));
    // multiModal = document.getElementById('multiModal');
  })
  $(document).on('click', '.joinLink', function (){
    getModalBody("/join", "회원가입");
  })

  function getModalBody(url, labelText){
    $("#multiModalLabel").text(labelText);
    $.ajax({
      url: url,
      type: 'GET',
      dataType:"html",
      success: function(html){
        $("#multiModalBody").empty().append(html);
        multiModal.show()
      },
      error:function(){
      }
    });
  }
</script>
<div class="loginWrap">
  <div class="loginBox">
    <form method="POST" action="/j_spring_security_check">
      <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
      <input type=hidden name=login_error value="${login_error}"/>
      <p class="login_title text-white">모바일센터 관리시스템</p>
      <p class="login_text">
        <input type="text" class="form-control" name="username" id="user_id" value="" placeholder="사용자 ID"/>
      </p>
      <p class="login_text">
        <input type="password" class="form-control" name="password" id="user_pw" value="" placeholder="비밀번호"/>
      </p>
      <p class="login_btn">
        <input type="image" src="images/login_.png"/>
      </p>
      <div class="row justify-content-between mx-3">
        <div class="col-auto">
          <a class="text-white" href="<c:url value="/findId" />">아이디 찾기</a>
          <br>
          <a class="text-white" href="<c:url value="/findPwd" />">비밀번호 찾기</a>
        </div>
        <div class="col-auto">
          <%--<c:url value=" /join" />--%>
          <a class="text-white joinLink" href="#">회원가입</a>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="multiModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="multiModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="multiModalLabel"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="multiModalBody">

      </div>
    </div>
  </div>
</div>