@component('components.plant.template_popup',  ['id' => 'popup_nutrition'])

<div class="nutrient-info">
    <div class="nutrient-caption">
        <h1 class="main-title timing"></h1>
        <h5 class="main-title">to start collecting your next Nutrient Points</h5>
        <label class="sub-title">AR game refreshes at <BR>12am daily.</label>
    </div>

    <div class="nutrient-content">
        <template class="nutrient-item">
            <div class="nutrient-icon"></div>
            <div class="nutrient-txt">
                <h4 class="balance"></h4>
                {{-- <label class="info"></label> --}}
                <div class="nutrition_add"></div>
            </div>
        </template>
    </div>
</div>

<div class="nutrient-confirmation" style="display: none;">
    <div class="icon"></div>

    <label class="main-title slug-name mt-2 mb-0"></label>
    <div class="act-text">
        <h3 class="main-title">Are you sure?</h3>
        <label class="sub-title">
            You will convert 
            <span class="important num-token"></span>
            <span class="important">tokens</span>
            <br>
            for 
            <span class="important num-unit"></span>
            <span class="important">x</span>
            <span class="important slug-name"></span>
            <span class="important">Point</span>.
        </label>
    </div>

    <div>
        <button class="btn btn-primary" id="cta_exchange">Confirm</button>
    </div>
</div>

<div class="nutrient-msg" style="display: none;">
    <label class="act-text sub-title"></label>

    <div>
        <button class="btn btn-primary" id="btn_back">Back</button>
    </div>
</div>

@endcomponent

@section('script')
<script src="{{ asset('js/plant/nutrition.js') }}"></script>
@append