o<div data-options="dxView : { name: 'vwRegattaOverview', title: 'vwRegattaOverview' } ">
    <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-content-background">
        <!--<div data-bind="dxCommand: { id: 'btnRefresh', icon: 'refresh', onExecute: btnRefresh_onExecute, visible: true }"></div>-->
        <div data-bind="dxCommand: { id: 'back', behavior: 'back', type: 'back', visible: false }"></div>
        <div class="outer" data-bind="dxDeferRendering: {
                 renderWhen: isReady }">
            <div data-bind="dxScrollView: { }">
                <div style="max-width: 600px;" class="mx-auto pb-4">
                    <!-- Regatta logo -->
                    <div class="mb-4" data-bind="visible: $root.regattaData.logoImgIsVisible">
                        <div class="mx-2 text-center">
                            <img id="img-logo" class="mx-auto" style="margin-bottom: 10px; width: 100%; max-width:350px; max-height: 350px;" data-bind="attr: { src: $root.regattaData.logoImg }" />
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        <!-- Regatta Dates -->
                        <div class="left" style="width: 300px;">
                            <table class="mx-2 mb-4 text-top" style="width: 100%;">
                                <tbody>
                                    <tr>
                                        <td style="width: 75px;" class="text-top">
                                            <div class="cp mx-auto">
                                                <div class="cp-top">
                                                    <div data-bind="text: $root.regattaData.regattaStartMonth"></div>
                                                </div>
                                                <div class="cp-bottom">
                                                    <div data-bind="text: $root.regattaData.regattaStartDay"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="pl-3">
                                            <div class="title mb-1">Regatta Dates</div>
                                            <div data-bind="text: $root.regattaData.regattaDates"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- Entry Deadline -->
                        <div class="left" style="width: 300px;">
                            <table class="mx-2 mb-4 text-top" style="width: 100%;">
                                <tbody>
                                    <tr>
                                        <td style="width: 75px;">
                                            <div class="cp mx-auto">
                                                <div class="cp-top">
                                                    <div data-bind="text: $root.regattaData.entryDeadlineMonth"></div>
                                                </div>
                                                <div class="cp-bottom">
                                                    <div data-bind="text: $root.regattaData.entryDeadlineDay"></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="pl-3">
                                            <div class="title mb-1">Entry Deadline</div>
                                            <div data-bind="text: $root.regattaData.entryDeadline"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="clear"></div>
                        <!-- Organization -->
                        <div class="left" style="width: 300px;">
                            <table class="mx-2 mb-4 text-top" style="width: 100%;">
                                <tbody>
                                    <tr>
                                        <td class="text-center" style="width: 75px;">
                                            <i class="fa fa-users large55 dark-blue" />
                                        </td>
                                        <td class="pl-3">
                                            <div class="title mb-1">Organization</div>
                                            <div data-bind="html: $root.regattaData.orgName"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- Venue location -->
                        <div class="left" style="width: 300px;">
                            <table class="mx-2 mb-4 text-top" style="width: 100%;">
                                <tbody>
                                    <tr>
                                        <td class="text-center" style="width: 75px;">
                                            <i class="fa fa-map-marker large55 dark-blue" />
                                        </td>
                                        <td class="pl-3">
                                            <div class="title mb-1">Venue</div>
                                            <div data-bind="html: $root.regattaData.venueInfo"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="clear"></div>
                        <!-- Weather Info -->
                        <div class="left" style="width: 300px;" data-bind="visible: $root.regattaData.isWeatherAvaialble">
                            <table class="mx-2 mb-4 text-top" style="width: 100%;">
                                <tbody>
                                    <tr>
                                        <td class="text-center" style="width: 75px;">
                                            <i class="fa fa-sun-o large55 dark-blue" />
                                        </td>
                                        <td class="pl-3">
                                            <div class="title mb-1">Weather</div>
                                            <div class="d-block" style="padding-right: 1.2rem">
                                                <span class="clamp-1" data-bind="html: $root.regattaData.regattaWeather"></span>
                                            </div>
                                            <a href="javascript:;" id="weatherLink" data-bind="dxclick: $root.showWeatherPopopover">Weather Details</a>
                                            <div id="weatherPopover"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- Contact Information -->
                        <div class="left" style="width: 300px;" data-bind="visible: ($root.regattaData.contactEmail !== '')">
                            <div class="mx-2 mb-4" style="width: 100%;">
                                <div class="title mb-1">Contact Information</div>
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <a href="javascript:;" style="text-decoration: none;" class="round-blue-icon" data-bind="dxclick: { execute: $root.regattaData.contactLink_onClick, timeout: 300}, attr: {'title': 'Contact ' + $root.regattaData.contactName }">
                                                    <i class="fa fa-envelope"></i>
                                                </a>
                                            </td>
                                            <td class="pl-3">
                                                <a href="javascript:;" , data-bind="dxclick: { execute: $root.regattaData.contactLink_onClick, timeout: 300}, attr: { 'title': 'Contact ' + $root.regattaData.contactName }">
                                                    <div style="display: inline;" data-bind="text: $root.regattaData.contactName"></div>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- Regatta Comments  -->
                        <div class="left" style="width: 300px;" data-bind="visible: $root.regattaData.commentsIsVisible">
                            <div class="mx-2 mb-4" style="width: 100%;">
                                <div class="title mb-1">
                                    Additional Details
                                </div>
                                <div data-bind="html: $root.regattaData.comments"></div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <!-- Web visitor count -->
                        <div style="margin-top: 0px; width: 100%; margin-bottom: 20px;">
                            <div style="text-align: center;">
                                <div style="display: inline;">
                                    <h1 class="bold" style="text-align: center;">
                                        <div style="display: inline;" data-bind="text: $root.regattaData.webVisitsMessage"></div>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>