Play template where web-mode not recongnize html tag firstly open

manage.scala.html

@(detail : AppDetail)

@main(title="控制台"){
    <div id="content">
        <div class="container">
            <ul class="list-group">
                <li class="list-group-item"><h4>@detail.app.name</h4></li>
                    <li class="list-group-item">
                        <span class="col-md-3">build时间
                            <span class="label label-warning">@detail.lastBuildTime.map(_.format("yyyy-MM-dd HH:mm:ss"))</span>
                        </span>
                        <button type="button" class="btn btn-info btn-sm op-build" data-url="@routes.AppManager.build(detail.app.name)">
                            <span class="cmd">Build</span>
                            <span class="spinner hidden build-spinner">
                                <div class="rect1"></div>
                                <div class="rect2"></div>
                                <div class="rect3"></div>
                                <div class="rect4"></div>
                                <div class="rect5"></div>
                            </span>
                        </button>
                        <span class="build-status"></span>
                    </li>
                    <li class="list-group-item"> 服务器列表 </li>
                    @for(host <- detail.hosts) {
                    <li class="list-group-item">
                        <span class="col-md-3">@host.ip</span>
                        <span>
                            <button
                                type="button"
                                class="btn btn-info btn-sm op-deploy"
                                data-check-status-url="@routes.AppManager.check(detail.app.name, host.ip)"
                                data-upload-url="@routes.AppManager.upload(detail.app.name, host.ip)"
                                data-restart-url="@routes.AppManager.restart(detail.app.name, host.ip)">
                                <span class="cmd">Deploy</span>
                                <span class="spinner hidden deploy-spinner">
                                    <div class="rect1"></div>
                                    <div class="rect2"></div>
                                    <div class="rect3"></div>
                                    <div class="rect4"></div>
                                    <div class="rect5"></div>
                                </span>
                            </button>
                            <span class="deploy-status label"></span>
                        </span>
                    </li>
                    }
            </ul>
            <div id="build-log" data-url='@routes.AppManager.buildLog(detail.app.name)' class="log-fixed hidden" >
                <code id="build-log-code" class="log-code-fixed"></code>
            </div>
        </div>
    </div>
    <script type="text/javascript">
     function reset(btn) {
         $(btn).removeAttr('disabled');
         $(".cmd", btn).text("Deploy");
     }

     function doing(btn, msg) {
         $("span.cmd", btn).text(msg);
         $("span.spinner", btn).removeClass("hidden");
         $(btn).attr('disabled','disabled');
     }

     function makeDeployError(btn, msg) {
         var status = $(btn).next(".deploy-status");
         $(status).removeClass("label-success").addClass("label-danger");
         $(status).text(msg);
         $("span.spinner", btn).addClass("hidden");
         reset(btn);
     }

     function makeDeploySuccess(btn, msg) {
         var status = $(btn).next(".deploy-status");
         $(status).removeClass("label-danger").addClass("label-success");
         $(status).text(msg);
         $("span.spinner", btn).addClass("hidden");
         $(btn).removeAttr('disabled');
         reset(btn);
     }

     function restart(btn) {
         doing(btn, "Restarting");
         var restartUrl = $(btn).data('restart-url');
         $.post(restartUrl).done(function (data) {
             if(data.success) {
                 makeDeploySuccess(btn, "Deploy Success");
             } else {
                 makeDeployError(btn, "Restart failed");
             }

         }).fail(function() {
             makeDeployError(btn, "Restart failed");
         });
     }

     function upload(btn) {
         var uploadUrl = $(btn).data("upload-url");
         doing(btn, "Uploading");
         $.post(uploadUrl).done(function (data) {
             if(data.success) {
                 restart(btn);
             } else {
                 makeDeployError(btn, "upload failed")
             }
         });
     }

     function checkStatus(btn) {
         var url = $(btn).data("check-status-url");
         doing(btn, "Checking");
         $.post(url).done(function(data) {
             if(data.success) {
                 if(!data.md5match) {
                     upload(btn);
                 } else {
                     restart(btn);
                 }
             } else {
                 makeDeployError(btn, "Status check error!!!");
             }
         }).fail(function() {
             makeDeployError(btn, "Status check error!!!");
         });
     }

     function markBuildError() {
         $(".build-status").removeClass("label label-success").addClass("label label-danger");
         $(".build-status").text("Error!");
     }

     //On ready callbacks
     $(function() {
         $(".op-deploy").click(function() {
             checkStatus(this);
         });
         $(".op-build").click(function() {
             var btn = this;
             $(this).attr('disabled','disabled');
             var url = "ws://" + window.location.host  + $("#build-log").data('url');
             var ws = new WebSocket(url);
             ws.onmessage = function(e) {
                 $("#build-log-code").text(e.data);
             }
             $("#build-log").removeClass("hidden");
             $(".build-spinner").removeClass("hidden");
             var url = $(this).data('url');
             $.post(url).done(function (data) {
                 if(data.success) {
                     $(".build-status").removeClass("label label-danger").addClass("label label-success");
                     $(".build-status").text("Success!");
                 } else {
                     markBuildError();
                 }
             }).fail(function () {
                 markBuildError();
             }).always(function () {
                 $(btn).removeAttr('disabled');
                 $(".build-spinner").addClass("hidden");
             });
         });
     });
    </script>
}

web-mode-debug

--- WEB-MODE DEBUG BEG ---
versions: emacs(24.3) web-mode("7.0.85")
vars: engine("razor") content-type("html") file("/home/jilen/workspace/ops-ui/app/views/manage.scala.html")
system: window(x) config("x86_64-unknown-linux-gnu")
colors: fg(nil) bg(nil) 
modes: whitespace-mode(nil) global-whitespace-mode(nil) rainbow-mode(nil) idle-highlight-mode(nil) fic-mode(nil)
(transient-mark-mode line-number-mode column-number-mode size-indication-mode auto-compression-mode auto-encryption-mode auto-composition-mode font-lock-mode global-font-lock-mode file-name-shadow-mode mouse-wheel-mode tooltip-mode prelude-mode prelude-global-mode delete-selection-mode global-auto-revert-mode smartparens-mode show-smartparens-mode show-smartparens-global-mode savehist-mode recentf-mode shell-dirtrack-mode global-hl-line-mode volatile-highlights-mode flyspell-mode projectile-mode projectile-global-mode anzu-mode global-anzu-mode undo-tree-mode global-undo-tree-mode winner-mode ido-ubiquitous-mode flx-ido-mode helm-occur-match-plugin-mode helm-match-plugin-mode which-function-mode global-flycheck-mode erc-spelling-mode erc-track-mode erc-truncate-mode company-mode global-company-mode guru-mode)
--- WEB-MODE DEBUG END ---