<div class="field-group">
    <h3>Logo</h3>
    <table>
        <tr>
            <td>
                <div class="d-flex">
                    <div class="flex-item">
                        <h4>Primario</h4>
                        <div class="image-preview-container mb-1">
                            <img id='primary-logo-preview' src='<?php laniakea_get_logo(laniakea_option('primary_logo'), LANIAKEA_THEME_URI . 'logo.png') ?>' width="80" height="80" style='max-height: 100px;width:auto;'>
                        </div>
                        <input id="primary-logo-button" type="button" class="button" value="Scegli logo primario" />
                        <?php laniakea_input('primary_logo', 'hidden', 'primary-logo-input'); ?>

                    </div>
                    <div class="flex-item">
                        <h4>Invertito</h4>
                        <div class="image-preview-container mb-1" style="background-color: black;">
                            <img id='inverted-logo-preview' src='<?php laniakea_get_logo(laniakea_option('inverted_logo'), LANIAKEA_THEME_URI . 'logo-white.png') ?>' width="80" height="80" style='max-height: 100px;width:auto;'>
                        </div>
                        <input id="inverted-logo-button" type="button" class="button" value="Scegli logo invertito" />
                        <?php laniakea_input('inverted_logo', 'hidden', 'inverted-logo-input'); ?>

                    </div>
                </div>

            </td>
        </tr>
    </table>
</div>

<div class="field-group">
    <h3>Logo Mobile</h3>
    <table>
        <tr>
            <td>
                <div class="d-flex">
                    <div class="flex-item">
                        <h4>Primario</h4>
                        <div class="image-preview-container mb-1">
                            <img id='primary-logo-mobile-preview' src='<?php laniakea_get_logo(laniakea_option('primary_logo_mobile'), LANIAKEA_THEME_URI . 'logo.png') ?>' width="80" height="80" style='max-height: 100px;width:auto;'>
                        </div>
                        <input id="primary-logo-mobile-button" type="button" class="button" value="Scegli logo mobile primario" />
                        <?php laniakea_input('primary_logo_mobile', 'hidden', 'primary-logo-mobile-input'); ?>

                    </div>
                    <div class="flex-item">
                        <h4>Invertito</h4>
                        <div class="image-preview-container mb-1" style="background-color: black;">
                            <img id='inverted-logo-mobile-preview' src='<?php laniakea_get_logo(laniakea_option('inverted_logo_mobile'), LANIAKEA_THEME_URI . 'logo-white.png') ?>' width="80" height="80" style='max-height: 100px;width:auto;'>
                        </div>
                        <input id="inverted-logo-mobile-button" type="button" class="button" value="Scegli logo mobile invertito" />
                        <?php laniakea_input('inverted_logo_mobile', 'hidden', 'inverted-logo-mobile-input'); ?>

                    </div>
                    <!--                 <div class="flex-item" style="margin-left:24px">
                    <h4>Breakpoint max-width (px)</h4>
                    <?php laniakea_input('logo_mobile_break_max', 'number'); ?>
                </div> -->
                </div>

            </td>
        </tr>
    </table>
</div>

<div class="field-group">
    <h3>Breakpoint Logo (px)</h3>
    <?php laniakea_input('logo_break', 'number'); ?>
</div>

<div class="field-group">
    <h3>Larghezza Massima Logo (px)</h3>
    <?php laniakea_input('logo_maxwidth', 'number'); ?>
</div>

<div class="field-group">
    <h3>Larghezza Massima Logo Mobile(px)</h3>
    <?php laniakea_input('logo_maxwidth_mobile', 'number'); ?>
</div>