@extends('installations.installationsNavbar')

@section('options')

<div>
    <div class="separator"></div>
    <h2 class="side-margin">Etat de l'installation / Maintenance</h2>
    <div class="row">
        <div class="col-6">
            <div class="card-fit blue small-height">
                <h4 class="side-margin">Indice Qualité</h4>
            </div>
        </div>
        <div class="col-6">
            <div class="card-fit white small-height">
            </div>
        </div>
    </div>
    <div class="separator"></div>
    <div class="row">
        <div class="col-6">
            <h4 class="side-margin">Maintenance</h4>
        </div>
        <div class="col-5">
            <h4 class="side-margin">Essaie de Pompage</h4>
        </div>
        <div class="col-1">
            <button class="btn button-fit right side-margin">Simuler</button>
        </div>
    </div>
    <div class="row">
        <div class="col-6 ">
            <div class="card-fit light-blue big-height">
                <div class="row">
                    <div class="col-3 center-vertical">
                        <div class="circle_green"></div>
                    </div>
                    <div class="col-9 center-horizontal">
                        <h4>Régénération</h4>
                    </div>
                    <div class="horizontal-line"></div>
                    <div class="col-3 center-vertical">
                        <div class="circle_green"></div>
                    </div>
                    <div class="col-9 center-horizontal">
                        <h4>Rechemisage</h4>
                    </div>
                    <div class="horizontal-line"></div>
                    <div class="col-3 center-vertical">
                        <div class="circle_yellow"></div>
                    </div>
                    <div class="col-9 center-horizontal">
                        <h4>Essai de pompage</h4>
                    </div>
                    <div class="horizontal-line"></div>
                    <div class="col-3 center-vertical">
                        <div class="circle_red"></div>
                    </div>
                    <div class="col-9 center-horizontal">
                        <h4>Inspection caméras
                    </div>
                    <div class="horizontal-line"></div>
                    <div class="col-3 center-vertical">
                        <div class="circle_red"></div>
                    </div>
                    <div class="col-9 center-horizontal">
                        <h4>Mesure de fond</h4>
                    </div>
                    <div class="horizontal-line"></div>
                    <div class="col-3 center-vertical">
                        <div class="circle_green"></div>
                    </div>
                    <div class="col-9 center-horizontal">
                        <h4>Mise en conformité de la tête du puit</h4>
                    </div>
                    <div class="horizontal-line"></div>
                    <div class="row justify-content-center">
                        <div class="col-10">
                            <button class="btn button-fit">Ajouter +</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card-fit red special-height">
                <h4>Historique</h4>
            </div>
            <div class="card-fit white">
                <div class="row">
                    <div class="col-2">
                        <div class="circle_green"></div>
                    </div>
                    <div class="col-2">
                        <h4>A jour</h4>
                    </div>
                    <div class="col-2">
                        <div class="circle_yellow"></div>
                    </div>
                    <div class="col-2">
                        <h4>A faire</h4>
                    </div>
                    <div class="col-2">
                        <div class="circle_red"></div>
                    </div>
                    <div class="col-2">
                        <h4>Retard</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection