<% include _header %>


<div class="row">
    <div class="col-sm-12">
        <h1>Youâ€™re only a hop away from
            your next GP visit</h1>

        <div style="background-color: whitesmoke; padding: 5%;">
        
            <h2>mediHopper provides a <b>flexible queue system</b> that <b>adapts</b>
                to your changing circumstances, making visiting a GP
                clinic <b>super accessible</b>.</h2>
            
            <h2>You are now <b>empowered</b> to visit a GP when you want, 
                and where you want.</h2>

            <p><a class="btn btn-primary" data-bs-toggle="collapse" href="#aboutExpand" 
                    role="button" aria-expanded="false" aria-controls="aboutExpand">
                            Explain further</a></p>

            <div class="collapse" id="aboutExpand">
                <div class="card card-body">
                <p>Hop into the queue that suits you best based on distance 
                    from where you are, and queue sizes. If your situation changes,
                    simply <b>hop backwards</b> a few positions in the queue that you're in, 
                    or <b>hop into a different clinic</b> instead.</p>
        
                <p>Your medical records are stored in a <b>centralised database</b>, meaning that
                    whichever clinic you visit, the clinic will have avail of your <b>registration
                    details</b> so you never have to re-register, and your doctor will have avail 
                    of your <b>medical records</b> and <b>consultation history</b> so they will be 
                    up-to-date on your health condition.</p>
                
                </div>
            </div>

        </div>

        <table width="100%">
            <tr>
                <td align="right">
                    <a class="btn btn-primary btn-lg" href="/signup">Sign Up</a>
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-sm-6 card rounded login">
        <h2>Login</h2>
        <p>Existing users, please log in below.</p>
        <table class="table table-borderless">
            <form action="/login" method="POST">
                <tr>
                    <td>Username:</td>
                    <td>
                        <input name="username" type="text" class="form-control"
                        placeholder="Username">
                    </td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>
                        <input name="password" type="password" class="form-control"
                        placeholder="Password">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                        <input name="role" type="hidden" value="patient">
                        <input type="submit" value="Log in" class="btn btn-primary">
                    </td>
                </tr>
                <tr style="border-top: 2px #7BBB54 dotted;">
                    <td>
                        Doctors log in here: <a class="btn btn-outline-primary" 
                                        href="/doctor-login">Doctor login</a>
                    </td>
                    <td style="border-left: 2px #7BBB54 dotted;" align="right">
                        Clinic Admin log in here: <a class="btn btn-outline-primary" 
                                        href="/clinic-admin-login">Clinic Admin login</a>
                    </td>
                </tr>          
            </form>
        </table>

    </div>
    <div class="col-sm-6">
        <img src="doctor-patient-1.jpg" width="100%">
    </div>
</div>

<% include _footer %>