fossasia/loklak_webclient

<div ng-click="closeModal($event)" ng-class="{'modal-wrapper':  true, 'modal-show': tweetModalShow}">
    <div ng-show="tweetModalShow" class="tweet tweet-modal">
        <div class="top-metadata">
            <img class="avatar" 
                 onError="this.onerror=null;this.src='/images/anon_200x200.png';"
                 ng-src="{{modalData.user.profile_image_url_https}}" alt="user-images">
                <!-- Metadata modalData -->
                <a class="name" ng-href="{{'./search?q=from:' + modalData.user.screen_name}}">{{modalData.user.name}}</a>
                <span class="screen-name">{{ "@" + modalData.user.screen_name}}</span>    
        </div>
        
        <div class="tweet-content">
            <!-- Main content -->
            <p class="tweet-content-text" ng-bind-html="modalData.text | tweetMention | tweetHashtag | toTrusted"></p>

           <!-- Images - 1 img -->
           <div data-ng-click="switchToSwipe(modalData.id_str);" class="images-wrapper clearfix" ng-if="modalData.images_count === 1">
                   <div class="single-masonry-item" ng-repeat="image in modalData.images">
                       <img ng-src="{{image}}" alt="A masonry brick">
                   </div>
           </div>
           <!-- Images - 2 imgs -->
           <div data-ng-click="switchToSwipe(modalData.id_str);" class="images-wrapper clearfix showcomposition" ng-if="modalData.images_count === 2">
                   <div class="double-masonry-item" ng-repeat="image in modalData.images">
                       <img ng-src="{{image}}" alt="A masonry brick">
                   </div>
           </div>
           <!-- Images - 3 imgs -->
           <div data-ng-click="switchToSwipe(modalData.id_str);" class="images-wrapper clearfix showcomposition" ng-if="modalData.images_count === 3">
                   <div ng-class="{'triple-masonry-item': true, 'first-item': ($index === 0)}" ng-repeat="image in modalData.images">
                       <img ng-src="{{image}}" alt="A masonry brick">
                   </div>
           </div>
           <!-- Images - 4 imgs -->
           <div data-ng-click="switchToSwipe(modalData.id_str);" class="images-wrapper clearfix showcomposition" ng-if="modalData.images_count === 4">
                   <div class="quad-masonry-item" ng-repeat="image in modalData.images">
                       <img ng-src="{{image}}" alt="A masonry brick">
                   </div>
           </div>

            <!-- Action list -->

            <div class="action-list">
                <div class="action-reply">
                    <button class="reply" />
                </div>
                <div class="action-retweet">
                    <button class="retweet" /><span ng-if="modalData.retweet_count" class="rt-count">{{modalData.retweet_count}}</span>     
                </div>
                <div class="action-favor">
                    <button class="favor" /><span ng-if="modalData.favourites_count" class="fav-count">{{modalData.favourites_count}}</span>      
                </div>
                <div class="action-more" ng-click="toggleShowMoreAction()">
                    <i class="fa fa-circle"></i>
                    <i class="fa fa-circle"></i>
                    <i class="fa fa-circle"></i>
                <div ng-show="showMoreAction" class="more-actions">
                    <ul>
                        <li><a class="copy-link" data-ng-click="openSingleTweet(modalData.id_str)">Open this single tweet</a></li>
                    </ul>
                </div>
                </div>
            </div>

            <!-- detailed metadata -->
            <div class="detail-metadata">
                <span class="metadata">{{ modalData.created_at | date:'h:mm a - dd MMM yyyy .' }}</span> · 
            </div>        
        </div>
    </div>
</div>