$(function() {
   $("#list_txs_in_wallet").on('click', function(){
       const coin_id = $(this).data("coinid"); 
       const user_id = $(this).data("userid");
       const coin_name = $(this).data("coinname");
        $.getJSON(`/users/${user_id}/transactions?coin_id=${coin_id}`,function(APIresponse){
            showTxsWithTemplate(APIresponse);
            changeListLink(coin_name);
        });
   }); 
   $("[id=transaction-show-more-icon]").on('click', function(){
        const tx_id = $(this).data("txid"); 
        const user_id = $(this).data("userid");
        const image = $(this).data("image");
        const $thisIcon = $(this)
        $.getJSON(`/users/${user_id}/transactions/${tx_id}`,function(APIresponse){
            changeView(image, $thisIcon, APIresponse, tx_id); 
        }); 
   });
});

function showTxsWithTemplate(txs) {
    //Handlebars.registerPartial("notesPartial", $("#notes-partial-template").html());
    const src = $("#transaction-template").html();
    const template = Handlebars.compile(src);
    const txList = template(txs);
    $("#transactions_in_wallet").html(txList);
}
function showExtraTxDataTemplate(txAdditionalInfo, tx_id) {
    //insert-show-more-<%=transaction.id%>
    const src = $("#transaction-show-template").html();
    
    const template = Handlebars.compile(src);
    const txExtra = template(txAdditionalInfo);
    $(`#insert-show-more-${tx_id}`).html(txExtra);
}
function changeListLink(coinName){
    $("#list_txs_in_wallet").replaceWith(`<p id="list_txs_in_wallet" class="mt0 black-80 b ph3 pv2 ba f6 dib">${coinName} Transaction History</p>`)
}

function changeView(displayedImage, $icon, APIresponse, tx_id) {
    if (displayedImage === "ellipses"){
        showExtraTxDataTemplate(APIresponse, tx_id);
        changeToDownArrowIcon($icon);
       
    } else if (displayedImage === "downArrow") {
        $(`#insert-show-more-${tx_id}`).empty();
        changetoEllipsesIcon($icon);
    }
}

function changeToDownArrowIcon($icon) {
    $icon.data('image', "downArrow");
    $icon.removeClass("fa-ellipsis-h")
    $icon.addClass("fa-caret-down")
}
function changetoEllipsesIcon($icon) {
     $icon.data('image', "ellipses");
     $icon.removeClass("fa-caret-down");
     $icon.addClass("fa-ellipsis-h");
}

@@ -782,16 +782,25 @@
 e, tx_id
+, user_id
 ); %0A    
@@ -1175,24 +1175,33 @@
 lInfo, tx_id
+, user_id
 ) %7B%0A    //in
@@ -1440,16 +1440,580 @@
 xExtra);
+%0A%0A    const srcForMod = $(%22#edit-delete-icons-template%22).html();%0A    const templateForMod = Handlebars.compile(srcForMod);%0A    const deleteURL = %60/users/$%7Buser_id%7D/transactions/$%7Btx_id%7D%60%0A    const editURL = %60/users/$%7Buser_id%7D/transactions/$%7Btx_id%7D/edit%60%0A    const modFeature = templateForMod(%7BdeleteURL: deleteURL, editURL: editURL %7D);%0A    // $(%60#insert-edit-delete-$%7Btx_id%7D%60).html(modFeature);%0A    //%3Cdiv id=%22insert-edit-delte-%3C%25=transaction.id%25%3E%22%3E%3C/div%3E%0A    $(%60#insert-show-more-$%7Btx_id%7D%60).append(modFeature);%0A    $(%60#insert-show-more-$%7Btx_id%7D%60).addClass(%22pb4%22);
 %0A%7D%0Afunct
@@ -2254,16 +2254,25 @@
 e, tx_id
+, user_id
 ) %7B%0A    
@@ -2357,16 +2357,25 @@
 e, tx_id
+, user_id
 );%0A     
@@ -2509,24 +2509,84 @@
 %60).empty();%0A
+        $(%60#insert-show-more-$%7Btx_id%7D%60).removeClass(%22pb4%22);%0A
         chan

create template for adding delete and edit icons that appear when a transactions show view is requested by clicking on the ellipses icon