[
  {
    "search": "<div id=\"main-container\" class=\"container\">",
    "replace": "<div id=\"main-container\" class=\"container\">\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n        <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"/\">Taxi App</a>\n            <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n                <ul class=\"navbar-nav\">\n                    <li class=\"nav-item\">\n                        <a class=\"nav-link\" href=\"/login\">Login</a>\n                    </li>\n                    <li class=\"nav-item\">\n                        <a class=\"nav-link\" href=\"/dashboard\">Dashboard</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </nav>"
  },
  {
    "search": "<h1>Welcome to the Taxi App!</h1>",
    "replace": "<header class=\"text-center\">\n            <h1>Welcome to the Taxi App!</h1>\n        </header>"
  },
  {
    "search": "<div id=\"flash-messages\">\n            <!-- Flash Messages Go Here -->\n        </div>",
    "replace": "<div id=\"flash-messages\">\n            <!-- Flash Messages Go Here -->\n            {% for message in messages %}\n            <div class=\"flash-message flash-{{ message.category }}\">{{ message.message }}</div>\n            {% endfor %}\n        </div>"
  },
  {
    "search": "<div id=\"login-form\" class=\"form\">\n            <h2>Login</h2>",
    "replace": "<div id=\"login-form\" class=\"form\">\n            <h2>Login</h2>\n            {% with messages = get_flashed_messages() %}\n            <form id=\"login-form\" method=\"POST\" action=\"/login\">\n                <div class=\"form-group\">\n                    <label for=\"phone_number\">Phone Number</label>\n                    <input type=\"text\" id=\"phone_number\" name=\"phone_number\" required>\n                </div>\n                <div class=\"form-group\">\n                    <label for=\"password\">Password</label>\n                    <input type=\"password\" id=\"password\" name=\"password\" required>\n                </div>\n                <button type=\"submit\" class=\"btn\">Login</button>\n            </form>\n            {% endwith %}"
  },
  {
    "search": "<script type=\"text/javascript\">\n        // This will run when the DOM is ready.\n        $(document).ready(function() {\n            // Handle flash messages\n            var flashMessages = JSON.parse('{{ get_flashed_messages()|tojson|safe }}');\n            var flashContainer = $('#flash-messages');\n            for (var i = 0; i < flashMessages.length; i++) {\n                var flashMessage = flashMessages[i];\n                var flashClass = 'flash-' + flashMessage.category;\n                var flashElement = $('<div>').addClass('flash-message').addClass(flashClass).text(flashMessage.message);\n                flashContainer.append(flashElement);\n            }\n        });\n    </script>",
    "replace": ""
  }
]