<template>
    <JqxTabs ref="myTabs"
        :width="getWidth" :selectionTracker="true" :animationType="'fade'">
        <ul style="margin-left: 40px;">
            <li>
                <div style="height: 40px;">
                    <img style='float: left;' width='32' height='32' src="../../../images/building_small.jpg" alt="" class="small-image" />
                    <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
                        30 St Mary<br />
                        Axe
                    </div>
                </div>
            </li>
            <li>
                <div style="height: 40px;">
                    <img style='float: left;' width='32' height='32' src="../../../images/building2_small.jpg" alt="" class="small-image" />
                    <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
                        Burj Al Arab
                    </div>
                </div>
            </li>
            <li>
                <div style="height: 40px;">
                    <img style='float: left;' width='32' height='32' src="../../../images/building3_small.jpg" alt="" class="small-image" />
                    <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;">
                        The Willis
                        <br />
                        Tower
                    </div>
                </div>
            </li>
        </ul>
        <div class="content-container">
            <div style="height: 400px">
                <img src="../../../images/building_big.jpg" alt="" class="big-image" />
                <h3>
                    30 St Mary Axe
                </h3>
                <p class="important-text">
                    the Swiss Re Building (colloquially referred to as the Gherkin), is a skyscraper
                    in London's main financial district, the City of London, completed in December 2003
                    and opened at the end of May 2004. With 40 floors, the tower is 180 metres (591
                    ft) tall, and stands on the former site of the Baltic Exchange building, which was
                    severely damaged on 10 April 1992 by the explosion of a bomb placed by the Provisional
                    IRA.
                </p>
                <div class="more-text">
                    The building is on the former site of the Baltic Exchange building, the headquarters
                    of a global marketplace for ship sales and shipping information. On 10 April 1992
                    the Provisional IRA detonated a bomb close to the Exchange, severely damaging the
                    historic Exchange building and neighbouring structures. The UK government's statutory
                    adviser on the historic environment, English Heritage, and the City of London governing
                    body, the City of London Corporation, were keen that any redevelopment must restore
                    the building's old faade onto St Mary Axe. The Exchange Hall was a celebrated fixture
                    of the ship trading company.
                </div>
            </div>
        </div>
        <div class="content-container">
            <div style="height: 400px">
                <img src="../../../images/building2_big.jpg" alt="" class="big-image" />
                <h3>
                    Burj Al Arab
                </h3>
                <p class="important-text">
                    is a 5-star luxury hotel located in Dubai, United Arab Emirates. At 321 m (1,053
                    ft), it is the fourth tallest hotel in the world. Burj Al Arab stands on an artificial
                    island 280 m (920 ft) out from Jumeirah beach, and is connected to the mainland
                    by a private curving bridge. It is an iconic structure whose shape mimics the sail
                    of a ship.
                </p>
                <div class="more-text">
                    The beachfront area where Burj Al Arab and Jumeirah Beach Hotel are located was
                    previously called Chicago Beach. The hotel is located on an island of reclaimed
                    land 280 meters offshore of the beach of the former Chicago Beach Hotel. The locale's
                    name had its origins in the Chicago Bridge & Iron Company which at one time welded
                    giant floating oil storage tankers on the site. The old name persisted after the
                    old Hotel was demolished in 1997. Dubai Chicago Beach Hotel remained as the Public
                    Project Name for the construction phase of Burj Al Arab Hotel until Sheikh Mohammed
                    bin Rashid Al Maktoum announced the new name.
                </div>
            </div>
        </div>
        <div class="content-container">
            <div style="height: 400px">
                <img src="../../../images/building3_big.jpg" alt="" class="big-image" />
                <h3>
                    The Willis Tower
                </h3>
                <p class="important-text">
                    (formerly named, and still commonly referred to as, the Sears Tower) is a 108-story,
                    1,451-foot (442 m) skyscraper in Chicago, Illinois. At the time of its completion
                    in 1973, it was the tallest building in the world, surpassing the World Trade Center
                    towers in New York, and it held this rank for nearly 25 years. The Willis Tower
                    is the tallest building in the United States and the fifth-tallest freestanding
                    structure in the world, as well as the fifth-tallest building in the world to the
                    roof.
                </p>
                <div class="more-text">
                    Although Sears's naming rights expired in 2003, the building continued to be called
                    the Sears Tower for several years. In March 2009, London-based insurance broker
                    Willis Group Holdings agreed to lease a portion of the building, and obtained the
                    building's naming rights. On July 16, 2009, the building was officially renamed
                    the Willis Tower.
                </div>
            </div>
        </div>
    </JqxTabs>
</template>

<script>
    import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';

    export default {
        components: {
            JqxTabs
        },     
        data: function () {
            return {
                getWidth: '90%'
            }
        }
    }
</script>

<style>
    html, body {
        width: 100vw;
        height: 100vh;
        padding: 0;
        margin: 0;
    }

    .big-image {
        float: left;
        margin-right: 15px;
        margin-bottom: 15px;
        border: 1px solid #999;
        background: #fff;
        padding: 3px;
    }

    .small-image {
        border: 1px solid #ccc;
        background: #fff;
        padding: 3px;
    }

    .content-container {
        padding-left: 15px;
        padding-top: 15px;
        padding-right: 15px;
    }

    .important-text {
        font-size: 13px;
        color: #000;
    }

    .more-text {
        color: #444;
        font-size: 11px;
        font-style: italic;
    }
</style>