<form id="add-form">
    <div class="row">
        <div class="col-md-5">

        </div>
        <div class="col-md-2">
            <label for="year">Year: </label>
            <select class="form-control" name="year">
                <?php foreach ($years as $year): ?>
                    <option value="<?=$year->id?>">
                        <?=$year->name?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
    </div>
    <br/>
    <br/>

    <div id="row0" style="margin-bottom: 40px; margin-left: 10px;">
        <input type="hidden" id="context_0" class="context-txt" name="contexts[]" value="" />
        <div class="row">
            <div class="col-md-2">
                <label for="types">Type: </label>
                <br/>
                <br/>

                <select class="form-control types" data-id="0" name="types[]">
                    <?php foreach ($types as $type): ?>
                        <option value="<?=$type->id?>">
                            <?=$type->name?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <img src="/public/img/resourcemanager/loading.gif" id="loading_gif" style="z-index: 1000 !important;" />

            <div class="col-md-2" style="margin-left: 10px;">
                <label for="key" class="key-label">Key: </label>

                <select id="key_0" class="form-control keys" name="key[]">

                </select>
            </div>

            <div class="col-md-2" style="margin-left: -20px; width: 270px;">
                <div class="col-md-1 counter">
                    <div id="ref_counter_0" class="ref-counter">0</div>
                </div>
                <div class="col-md-9">
                    <label style="width: 300px;" for="text">Source text and Translation (English): </label>
                    <textarea id="txt_ref_0" name="text[]" class="form-control texts eng-text dinamic-txt new-res-txt" cols="50" rows="4" style="width: 200px;"></textarea>
                </div>
            </div>

            <div class="col-md-1" style="width: 85px;">
                <br/>
                <br/>

                <a id="ggl_translate_0" title="Google Translate" target="_blank">
                    <img class="logo" src="/public/img/resourcemanager/1024px-Google_Translate_logo.svg_.webp">
                </a>

                <a id="dpl_translate_0" title="DeepL Translate" target="_blank">
                    <img class="logo right" src="/public/img/resourcemanager/DeepL_Logo_2018.png">
                </a>
                <br/>
                <br/>

                <img class="logo swap-icon" title="Use reference as translation" src="/public/img/resourcemanager/2560px-Arrow_east.svg.png" data-id="0">
                <br/>
                <br/>

                <div class="tooltips info-tooltip">
                    <img id="cont_0" class="context-modal" style="width: 20px;" src="/public/img/resourcemanager/context.png">
                    <div class="tooltiptext" style="padding: 10px 10px 10px 10px">Click here to provide an optional context - an explanation about when and where on the interface this specific resource will appear. - Context must be written in English.</div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="col-md-1 counter">
                    <div id="res_counter_0" class="res-counter">0</div>
                </div>
                <div class="col-md-9">
                    <label for="text">Translation (Hungarian): </label>
                    <textarea id="txt_0" name="text_hun[]" class="form-control texts hun-text dinamic-txt new-res-txt" data-id="0" cols="50" rows="10" style="width: 200px;"></textarea>
                </div>
            </div>

            <div class="col-md-1 warning-div" id="warning-div_0" style="margin-top:20px;">

            </div>

            <div class="col-md-1 remove-row" id="remove_0" style="margin-left: -100px;">
                <br/>

            </div>

            <div class="col-md-1" style="margin-left: -50px; width: 240px;">
                <label for="text">Most similar hits: </label>
                <br/>
                <br/>
                <div id="exist_0" class="hit-text">

                </div>
            </div>
        </div>
    </div>
</form>

<div class="row" style="margin-left: 0px;">
    <div class=" form-group col-md-9">
        <button type="button" style="width: 100% !important;" id="add_row_btn" name="button" class="btn btn-primary"><span class="fa fa-plus"></span>&nbsp; Add New</button>
    </div>

    <div class="col-md-7">

    </div>

    <div class=" form-group col-md-3">
        <button type="button" style="width: 64% !important;" id="save_ref" name="button" class="btn btn-success"><i class="fa fa-check"></i>&nbsp; Save All</button>
    </div>
</div>

<div class="container">
    <div id="alert-div" class="alert alert-danger alert-dismissible" role="alert">

    </div>
</div>

<div class="modal fade" id="myModal" role="dialog">
    <input type="hidden" id="context_ref_id" value="" />

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Or Update Context</h4>
            </div>

            <div class="modal-body">
                <p id="ref_p"></p>
                <div id="context_div">

                </div>
            </div>

            <div class="modal-footer">
                <button type="button" id="btn-save-context-new" class="btn btn-success">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
