<div class="mgnl-shell ">
    <div class="mgnl-shell__bar">
        <div class="mgnl-shell app--brand"><img src="/magnolia-ds/logo-magnolia.svg" height="30px"></div>
        <div class="mgnl-shell__bar__item" role="button">
            <div class="mgnl-dicon" data-lucide="grip"></div>
        </div>
        <div class="mgnl-shell__bar__item" role="button">
            <div class="mgnl-dicon" data-lucide="star"></div>
        </div>
        <div class="mgnl-shell__bar__item" role="button">
            <div class="mgnl-icdon" data-lucide="search"></div>
        </div>
    </div>
    <div class="subapp">
        <div class="subapp__navigation">
            <div class="tabs">
                <div class="tabs--item">
                    <div class="tabs--item__label" role="button">Pages</div>
                </div>
                <div class="tabs--item tabs--item__active" role="button">
                    <div class="tabs--item__label">Homepage</div>
                    <div style="display:flex;align-items:center;justify-content:center">
                        <div class="close-icon"></div>
                    </div>
                </div>
            </div>
            <div class="close-icon close-app"></div>
        </div>
        <div class="subapp__view">
            <div class="subapp__content">
                <dialog class="mgnl-dialog" id="testdialog">
                    <header class="mgnl-dialog__header">
                        <h1 class="mgnl-dialog__title">Dialog Title</h1>
                        <div class="mgnl-dialog__header__actions">
                            <div class="mgnl-icon" data-lucide="maximize-2" onclick="this.closest('dialog')?.classList.toggle('fullscreen')"></div>
                            <div class="mgnl-icon" data-lucide="x" onclick="this.closest('dialog').close('cancel')"></div>
                        </div>
                    </header>
                    <div class="mgnl-dialog__body">
                        <form class="mgnl-form">
                            <div class="mgnl-form-group"> <input class="mgnl-form-field" type="text" id="title" name="title"><label class="mgnl-form-label" for="title">Title (en)</label><span class="error" id="titleError">Ttitle is requried</span></div>
                            <div class="mgnl-form-group"> <input class="mgnl-form-field" type="text" id="blabla" name="blabla" required=""><label class="mgnl-form-label" for="blabla">SubTitle (en)</label><span class="error" id="titleError">Subtitle is requried</span></div>
                            <div class="mgnl-form-group"> <select class="mgnl-form-field" id="listtest" name="languages">
                                    <option value="en">English</option>
                                    <option value="de">German</option>
                                    <option value="fr">French</option>
                                </select><label class="mgnl-form-label" for="listtest">Lanauges</label><span class="error" id="listtestEerror">Subtitle is requried</span></div>
                            <div class="mgnl-form-group"> <input class="mgnl-form-field is-invalid" type="url" id="url" name="url" required=""><label class="mgnl-form-label" for="url">URL (en)</label><span class="error" id="titleError">has to be an url and is required </span></div>
                            <div class="mgnl-form-group">
                                <div class="mgnl-input-group"><input class="mgnl-form-field is-invalid" type="text" id="testme" name="testme" required="">
                                    <div class="mgnl-input-group__addon"><span class="mgnl-input-group__addon__text">Select</span></div>
                                </div><label class="mgnl-form-label" for="testme">Custom Test</label><span class="error" id="titleError">has to be an url and is required </span>
                            </div>
                            <div class="mgnl-form-group">
                                <div class="mgnl-input-group">
                                    <div class="mgnl-input-group__addon"><span class="mgnl-input-group__addon__text">at</span></div><input class="mgnl-form-field is-invalid" type="text" id="usrname" name="usrname" required="">
                                </div><label class="mgnl-form-label" for="usrname">Username</label><span class="error" id="titleError">has to be an url and is required </span>
                            </div>
                            <div class="mgnl-form-group"> <textarea class="mgnl-form-field" rows="10" id="banana" name="blabla" required=""></textarea><label class="mgnl-form-label" for="banana">SubTitle (en)</label><span class="error" id="titleError">title error</span></div>
                        </form>
                    </div>
                    <div class="mgnl-dialog__footer">
                        <div class="mgnl-dialog__footer__actions"> <button class="mgnl-button mgnl-button--secondary mgnl-button--md" type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button><button class="mgnl-button mgnl-button--primary mgnl-button--md" type="button" onclick="this.closest('dialog').close('ok')">Ok</button></div>
                    </div>
                </dialog><i data-lucide="x">hallo welt</i><i data-lucide="menu">menu</i><button class="mgnl-button mgnl-button--primary mgnl-button--md" type="button" id="dialogtest">Submit</button>
            </div>
            <div class="subapp__actionbar">
                <div class="subapp__actionbar__title">
                    <div>Page</div>
                    <div class="close-icon"> </div>
                </div>
            </div>
        </div>
        <div class="subapp__footer">/mysite/blog-posts/blabla</div>
    </div>
</div>
                    
                

                    
<div class="mgnl-app">
</div>