<%- include('partials/head', { scripts: [] }) %>

<%- include('partials/header') %>
    <main>
        <div class="position-relative overflow-hidden p-3 p-md-3 m-md-1 text-center backgroundImg" style="background-image: url(<%= planet.image %>)">
            <div class="col-md-5 p-lg-5 mx-auto my-5">
                <h1 class="display-4 fw-normal iwantwhite"><%= planet.name %></h1>
                <p class="lead fw-normal iwantwhite"><%= planet.description %></p>
            </div>
        </div>
        <div class="container p-3 p-md-3">
            <div class="row bottomBorder">
                <div class="col-lg-6 contentsCenter">
                    <h1>Color <span class="badge bg-secondary" style="background-color: <%= planet.colorPicker %> !important"><%= planet.colorPicker %></span></h1>
                </div>
                <%- include('partials/propertyCard', { title: "Type ",
                 value: planet.planetType
                }) %>
            </div>
            <div class="row bottomBorder">
                <%- include('partials/propertyCard', { title: "Material ",
                 value: planet.material
                }) %>
                <%- include('partials/propertyCard', { title: "Solar System ",
                 value: planet.solarSystem
                }) %>
            </div>
            <div class="row bottomBorder">
                <%- include('partials/propertyCard', { title: "Can humans live there? ",
                 value: planet.canSustainEarthLife
                }) %>
                <%- include('partials/propertyCard', { title: "Distance to Earth ",
                 value: planet.distanceToEarth + " Km"
                }) %>
            </div>
            <div class="row bottomBorder">
                <%- include('partials/propertyCard', { title: "Mass ",
                 value: planet.mass + " Kg"
                }) %>
                <%- include('partials/propertyCard', { title: "Gravity ",
                 value: planet.gravity + " m/s^2"
                }) %>
            </div>
            <div class="row bottomBorder">
                <%- include('partials/propertyCard', { title: "Acceleration ",
                 value: planet.acceleration + " Km/h"
                }) %>
                <%- include('partials/propertyCard', { title: "Density ",
                 value: planet.density + "Kg/m^3"
                }) %>
            </div>
            <div class="row bottomBorder">
                <%- include('partials/propertyCard', { title: "Discovered On ",
                 value: planet.discoveredOn
                }) %>
                <%- include('partials/propertyCard', { title: "Discovered By ",
                 value: planet.discoveredBy
                }) %>
            </div>
        </div>
    </main>
<%- include('partials/footer') %>
